项目中，通常会有输入框联想输入的需求，下面是根据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());
}
}
相关推荐
`jQuery-autocomplete` 是一个基于 jQuery 的开源插件，用于实现自动补全功能。这个插件使得在网页表单输入框中快速、高效地提供下拉建议变得简单易行，提高了用户界面的交互性和用户体验。它广泛应用于搜索引擎、...
jQuery-autoComplete是一款非常实用的前端插件，主要用于实现输入框的自动补全功能，它极大地提升了用户体验，尤其是在处理大量数据时，使得用户能够快速找到所需信息。本文将深入探讨jQuery-autoComplete-1.8.22...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案，它极大地提升了用户体验，尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的，因此，首先需要确保在项目中引入了...
jQuery Autocomplete 是一个非常流行的 jQuery 插件，它为文本输入框提供了自动补全功能，极大地提升了用户体验。在 Web 应用中，尤其是在需要用户输入搜索关键词或选择特定项时，这个插件非常实用。本篇文章将深入...
jQuery Autocomplete是一个非常实用的前端插件，它允许开发者为输入框添加自动补全功能，极大地提升了用户体验。这个"jQuery-Autocomplete-master"压缩包提供了一个简单的示例，用于演示如何利用jQuery实现自动补全...
jQuery Autocomplete插件是一个非常实用且功能丰富的jQuery扩展，主要用于实现网页表单中输入框的自动补全功能。该插件能够极大地提升用户体验，使用户在输入数据时更加便捷高效。本文档将详细解释其使用方法、参数...
【标题】"带数据库的 jquery-autocomplete-php" 涉及到的是一个使用jQuery库实现的自动补全功能，结合PHP和MySQL数据库来提供动态搜索建议。jQuery UI的Autocomplete插件是这个功能的核心，它允许用户在输入框中输入...
而jQuery Autocomplete插件则是一个非常实用的工具，它能够帮助用户在输入框中实现自动补全功能，提高用户体验。虽然jQuery UI库中也有一个Autocomplete组件，但这里我们讨论的是一个独立且简单的jQuery ...
综上所述，"前端项目-jquery.devbridge-autocomplete"是一个强大而灵活的前端工具，它将jQuery的便利性和自动完成的功能结合在一起，为Web开发者提供了构建高效自动补全功能的利器。无论是简单的本地数据应用，还是...
6. **Autocomplete** - 自动补全功能，常见于搜索框或输入框，提高用户体验。 7. **Sortable** - 使得列表项可以拖放排序，适用于任务管理或项目列表。 8. **Resizable** - 允许用户通过拖动边角调整元素大小。 在...
`jQuery Autocomplete` 是一个非常流行的 jQuery 插件，它为输入框提供了自动补全的功能，适用于各种 Web 应用中的搜索、填充表单等场景。这个插件能够根据用户输入的部分字符，快速显示与之匹配的数据列表，极大地...
《自动补全-jquery.autocomplete.js》 在Web开发中，自动补全功能是一种非常实用且常见的用户体验优化手段。它通常被应用于搜索框、表单输入等场景，能够帮助用户快速找到并选择他们想要的选项，提高输入效率。在...
2. **初始化插件**：为需要添加自动补全功能的input元素调用`.autocomplete()`方法，设置相应的配置参数。 3. **定义数据源**：可以是函数、URL或者数组，用于提供匹配建议。 4. **处理事件**：可以绑定到插件的特定...
**jQuery AutoComplete 插件详解** 前端开发中，用户输入的自动补全功能是一个常见的需求，它可以提升用户体验，使得用户能够快速找到并选择所需的信息。`jQuery AutoComplete` 是一个基于 jQuery 的轻量级插件，它...
`jQuery UI Autocomplete`是基于`jQuery`库的一个强大组件，用于实现自动补全功能。这个组件能够极大地提升用户体验，特别是在需要用户输入特定信息时，如搜索框、表单字段等。`jQuery UI`提供了丰富的界面效果和...
jQuery Autocomplete 是一个非常实用的插件，它为网页表单输入框提供了自动补全功能，极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需的基本文件，包括样式表、HTML 模板、...
Widgets是jQuery UI的核心，包括Accordion（手风琴效果）、Autocomplete（自动补全）、Dialog（对话框）等。Effects则提供了各种动画效果，如Fade（淡入淡出）、Slide（滑动）等。Position模块提供了元素相对定位的...