autocomplete插件

最新推荐文章于 2022-09-12 16:07:22 发布

原创最新推荐文章于 2022-09-12 16:07:22 发布 · 592 阅读

0 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

107 篇文章

订阅专栏

本文分享了使用jQuery插件实现自动完成功能的实践经验，包括插件选择、配置和实现代理服务器数据获取的过程。同时展示了如何通过前端输入框触发自动完成，并通过后端数据返回结果进行匹配和展示。

最近公司业务需要完成一个自动完成插件，在网上找了很久，最后感觉还是

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

这个插件最好，希望更多的人不要想我一样走了很多的弯路，我把我使用的贴出来，望大家多指正.

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/plugins/autocomplete/lib/jquery.js"></script>
<script type='text/javascript' src='/plugins/autocomplete/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='/plugins/autocomplete/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='/plugins/autocomplete/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='/plugins/autocomplete/jquery.autocomplete.js'></script>
<script type='text/javascript' src='/plugins/autocomplete/localdata.js'></script>
<link rel="stylesheet" type="text/css" href="/plugins/autocomplete/main.css" />
<link rel="stylesheet" type="text/css" href="/plugins/autocomplete/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="/plugins/autocomplete/lib/thickbox.css" />
<script type="text/javascript">
function initAutoComplete(json){
$("#suggest1").autocomplete(json,{
minChars:0,
width:310,
autoFill: false,
formatItem: function(row, i, max) {
var row=eval(row);
return row.shortName + "[" + row.comPan + "]";
},
formatMatch: function(row, i, max) {
return row.shortName;
},
formatResult: function(row) {
return row.shortName;
}});
}

function ss(data){
var keys=$("#suggest1").val();
alert(keys);
var v=0;
for(var i=0;i<data.length;i++)
{
//alert("keys="+keys+" name="+data[i].sName);
if(keys==data[i].sName){
v=1;
}
}
alert(v==1);
}

$(document).ready(function(){
var myjson;
$.post("/servlet/mydata",{},function(data){
myjson=data;
},"json");

$("#suggest1").focus(function(){
initAutoComplete(myjson);
});

$("#suggest1").blur(function(){
ss(myjson);
});
});

function initAutoComplete(json){
$("#keyword").autocomplete(json , {
minChars:1,
width:260,
dataType:"json",
matchContains: true,
formatItem: function(row, i, max) {
return row.shortName + "["+row.comPan+"]";
},
formatMatch: function(row, i, max) {
return row.comPan;
},
formatResult: function(row) {
return row.shortName;
}
}).result(function(event, row, formatted) {
$("#m").val(row.shortName);
});
}
</script>
</head>
<body>
<form action="#">
<input type="text" id="suggest1" />
<input type="text"/>
<input type="submit"/>
</form>
</body>
</html>

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
public class json extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=utf-8");
PrintWriter out = response.getWriter();
List<Person> list=new ArrayList<Person>();
Person p1=new Person();
p1.setComCode("1");
p1.setShortName("Peter Pan");
p1.setComPan("peter@pan.de");
list.add(p1);
Person p2=new Person();
p2.setComCode("2");
p2.setShortName("Molly");
p2.setComPan("molly@yahoo.com");
list.add(p2);
Person p3=new Person();
p3.setComCode("3");
p3.setShortName("Forneria Marconi");
p3.setComPan("live@japan.jp");
list.add(p3);
Person p4=new Person();
p4.setComCode("4");
p4.setShortName("Master <em>Sync</em>");
p4.setComPan("205bw@samsung.com");
list.add(p4);
Person p5=new Person();
p5.setComCode("5");
p5.setShortName("Dr. <strong>Tech</strong> de Log");
p5.setComPan("g15@logitech.com");
list.add(p5);
out.println(JSON.toJSONString(list));
out.flush();
out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}

public class Person {
private String comCode;
private String comPan;
private String shortName;

public String getComPan() {
return comPan;
}

public void setComPan(String comPan) {
this.comPan = comPan;
}

public String getShortName() {
return shortName;
}

public void setShortName(String shortName) {
this.shortName = shortName;
}

public String getComCode() {
return comCode;
}

public void setComCode(String comCode) {
this.comCode = comCode;
}

}

web.xml

<servlet>
<servlet-name>json</servlet-name>
<servlet-class>json</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>json</servlet-name>
<url-pattern>/servlet/mydata</url-pattern>
</servlet-mapping>

还有要注地方就是过滤规则哪里 formatMatch 这里不能为 null不然会出不来效果.