项目中，通常会有输入框联想输入的需求，下面是根据jquery-autocomplete组件封装的一个自动补全插件
依赖：1.0 jquery.js
2.0 jquery.autocomplete.js
3.0 jquery.autocomplete.css
ajax请求后台数据，并为输入框绑定 autocomplete事件（封装好的js，在页面可以直接引用）：
/*
* author:changp
* ajax请求后台，初始化数据
*/
/*定义对象*/
var Command = function(inputId,url) {
this.inputId = inputId;
this.url = url;
};
/*向后端获取数据*/
Command.prototype.execute = function() {
var cmdObj = this;
/*申明ajax对象*/
var xhr = null;
var url = this.url;
var arr = [];
for ( var pro in cmdObj) {
var obj = cmdObj[pro];
var value = obj;
if ($.isArray(obj)) {
value = obj.join(",");
}
if (obj && obj.type == "date") {
value = obj.toString();
}
if ($.isPlainObject(obj) || $.isFunction(obj) || pro == "inputId" || pro == "url") {
continue;
}
arr.push(pro + "=" + encodeURIComponent(value));
}
var param = arr.join('&');
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP.1.0");
}
xhr.open("POST", url, false);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
cmdObj.data = eval('('+txt+')');
}
};
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(param);
};
/*自动补全*/
Command.prototype.autocomplete = function(){
var cmdObj = this;
$('#'+cmdObj.inputId).autocomplete(cmdObj.data, {
max: 100, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 200, //提示的宽度，溢出隐藏
scrollHeight: 400, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
delay: 10, //Default: 远程为400 本地10
autoFill: false, //自动填充
formatItem: function(row, i, max) { //列表显示
return cmdObj.formatItem(row, i, max);
},
formatMatch: function(row, i, max) { //匹配对比内容
return cmdObj.formatMatch(row, i, max);
},
formatResult: function(row) { //匹配选择结构
return cmdObj.formatResult(row);
}
}).result(function(event, row, formatted) { //选择完成之后回调函数
cmdObj.result(event, row, formatted);
});
};
页面调用实例：
<!DOCTYPE HTML >
<html>
<head>
<title>jquery.autocomplete.js 实例</title>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<script type='text/javascript' src='ajax.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
</head>
<body>
<form id="form1">
<div>
用户名称:<input id="name" style="width:200px"/>
购买记录 :<input id="shipcode" style="width:200px"/>
</div>
</form>
<script type="text/javascript">
var cmd = new Command("name","./jsonAction");
cmd.name="changpan";
cmd.pwd = "123456";
cmd.execute(); //加载数据后台数据
cmd.autocomplete(); //自动补全
cmd.formatItem = function(row, i, max){//为每个要显示的项目使用高级标签
if("undefined" != typeof row.name || "undefined" != typeof row.to ){
return "<table width='150px'><tr><td align='left'>" + row.name + "</td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>约【<font color='red'>" + row.to + "</font>】条记录</font></td></tr></table>";
}
};
cmd.formatMatch = function(row, i, max){//对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的
return row.name;
};
cmd.formatResult = function(row){//和formatItem类似,但可以将将要输入到input文本框内的值进行格式化
//return row.name;
};
cmd.result = function(event, row, formatted){ //选择完毕之后执行的动作
$("#shipcode").val(row.to);
};
</script>
</body>
</html>
后台servlet 代码，返回联想输入列表：
package com.cheese.framework.web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class JsonAction extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
JSONArray array = new JSONArray();
array.add("{name: \"pingg\", to: \"1\" }");
array.add("{name: \"pingg\", to: \"2\" }");
array.add("{name: \"pingg\", to: \"3\" }");
array.add("{name: \"pingg\", to: \"4\" }");
array.add("{name: \"wang tao\", to: \"2\" }");
array.add("{name: \"changpan\", to: \"3\" }");
array.add("{name: \"yang tingting\", to: \"4\"}");
array.add("{name: \"li an\", to: \"5\" }");
array.add("{name: \"lin la\", to: \"6\" }");
array.add("{name: \"simon\", to: \"7\" }");
array.add("{name: \"xu mei\", to: \"8\" }");
response.getWriter().write(array.toString());
}
}
相关推荐
1.该js支持jquery的自动补全功能 2.因为jquery-ui是jquery的插件，所以部分版本jquery可能不支持该插件，建议换成内附的jquery.js 3.如有疑惑，请阅读内附的说明文档
jquery自动补全插件（jquery autocomplete） 内包含使用说明，前台+后台
包括新增的demo示例，以及官方文档的解说，方法说明，主要是ajax请求自动补全的示例
NULL 博文链接：https://hzywy.iteye.com/blog/1901325
运用jquery.autocomplete.js 和jquery.autocomplete.css实现文本框自动补全，直接下载可以看到运行效果，带注释
[ jquery.autocomplete ]jquery的自动完成/补全插件(很好很强大) 谁用谁知道
利用jquery.autocomplete.js插件实现了文本框自动补全的功能， 附件包含两个实例代码，均以txt文档显示，都有前台和后台代码。一个是传一个参数，一个是传两个参数，后台以一般处理程序ashx文件编写。大家只需要修改...
jQuery UI Autocomplete是jQuery UI的自动完成组件，通过ajax请求的JSON数组、JSONP来获取数据，实现自动补全功能
jquery 文本框 自动补全 ajax autocomplete 完整实例
autoComplete 自动补全 支持中文补全 中间字查询
jquery自动补全代码 AutoComplete-master
输入框自动补全 + 记录搜索缓存 输入框自动补全功能并实现与PHP交互，点击选中行后记录当前数据到本地cookie，同时可以跳转页面。 功能点： 输入框输入数值之后自动取服务端数据。 当输入框为空的时候 显示 缓存...
ibatis +spring+struts2+jquery.autocomplete实现产品自动补全功能（二） 附带源码
style.css几个文件，访问的是数据库，返回的是json数据，json格式已经在index.html中，文本框下来智能选择补全，jquery.ui.js中已经包含了jquery.autocomplete.js源码，不在需要单独引用jquery.autocomplete.js文件
layui自动填充插件,使用教程配合https://www.cnblogs.com/aeolian/p/11993836.html#autoid-6-0-0
jquery文本框自动补全完整实例 ajax autocomplete
jquery文本框自动补全ajax autocomplete
自动补全包含：邮箱自动补全、城市自动补全、中文自动补全功能
jquery autocomplete 动态补全例子支持中文 ajax传递json数据 文件里有json数据拼接