首先下载jquery.js和jquery.autocomplete.js
注意:jquery.js 要放在jquery.autocomplete.js前面。
还有个样式jquery.autocomplete.css , 随意下载。
首先js代码如下
$().ready(function() {
$("#searchText").autocomplete("$! {request.contextPath}/hrHiPersons!ajaxSelectPerson.action", {
minChars: 0,
max: 12,
autoFill: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220,
formatItem: function(item) {
return item[0];
}
});
});
struts2的url应该不陌生吧
autocomplete的参数,这里不写了,可以参考
http://chenling1018.blog.163.com/blog/static/148025420101250354380/
他写的很详细,我也测过,基本都描述的差不多.
以前js方法的item参数,就是后台返回的json流,一下是java代码
public String ajaxSelectPerson(){
try {
String search = getRequest().getParameter("q");
if(search==null||search.length()==0) return null;
List<String> names = new ArrayList<String>();
names.add("张三");
names.add("李四");
names.add("王五");
getResponse().setCharacterEncoding("UTF-8");
JSONArray json = JSONArray.fromObject(names);
PrintWriter out = getResponse().getWriter();
out.print(json);
out.flush();
out.close();
return null;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
他默认是get提交,而且默认接受的参数是q,一般不用修改。
其次主要是乱码的问题,ajax的传输都是utf-8,所以我们尽量都转成utf-8(tomcat,jsp),然后把response也设置成utf-8,这样中文就没问题了。
还有个忘了说, 需要修改autocomplete的源码,主要是为了中文的输入识别问题
在199-200行
$(input.form).unbind(".autocomplete");
修改为:
$(input.form).unbind(".autocomplete").bind("input", function() {
onChange(0, true);
});
OK了,效果还是不错的,比原先手写的jquery代码好多了,简单实用。
分享到:
相关推荐
jquery autocomplete 动态补全例子支持中文 ajax传递json数据 文件里有json数据拼接
demo,可直接运行查看效果,实现的效果是:在输入框中输入汉字时触发keyup事件,即自动出现多个选项,选中某选项时自动将该选项值和所需属性填充到指定输入框中。
jQuery UI Autocomplete是jQuery UI的自动完成组件,通过ajax请求的JSON数组、JSONP来获取数据,实现自动补全功能
autocomplete autocomplete控件 例子 包括源文件
NULL 博文链接:https://shihuan830619.iteye.com/blog/1629637
jquery搜索自动提示下拉框插件autocomplete-有我自己做的例子-支持中文
根据用户当前输入的关键字进行提示选择,一个简单demo例子,支持ajax 本地获取数据
自己做了一个jQuery的AutoComplete插件,与官方的不同实现方式不同,里面带有例子 具体请看http://blog.csdn.net/luq885/archive/2007/05/27/1627389.aspx<br/>
autocomplete——js,css文件+ 例子
文本自动填充,http://blog.csdn.net/linlinv3/article/details/38516661 可以看具体例子,官网写的太含糊了。
由于该控件获得数据可以从数组和URL两种方式获取,所以写了两个简单的小例子试验一下。 前台代码如下: 代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”AutoComplete.aspx.cs” ...
一系列的jquery帮助文档,里面有jquery核心,jquery ui,jquery autocomplete,jquery form,以及一些高手写的技术文章,都有一些demo(演示例子)
jquery版autocomplete,废了好大劲找了一个例子,已经过改良,效果还不错
html5-autocomplete-suggestions插件实例包,是一个由HTML5与jQuery共同实现的表单输入自动完成的例子,当用户输入的时候,随着字符的输入,会自动匹配输入结果,以下拉的方式显示出匹配项,与百度搜索框的下拉提示...
自己用JQuer做的一个自动补全的例子,拿出来和大家探讨探讨。
使用jQuery+CSS 做了一个输入框自动完成的功能,代码不多,有例子,简单易懂。有HTML和JSP两个格式的。使用到了JSON数据格式。
使用HTML5+Jquery实现Autocomplete功能,本资源中主要是举例控件如何使用。 $(document).ready(function(){ $("#autocomplete").autocomplete({ minLength:0, autoFocus:false, source: availableTags, ...
《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前...
基于JQuery插件的自动匹配 支持中文检索,包含三个例子,详细的讲解!!!
您可以使用选项: mkmap:布尔显示文件夹选项价值默认网址脚本链接提出请求php/search.php 参数名称PHP 脚本使用的 GET 或 POST 参数搜索显示所有布尔值显示焦点上的所有值错误的打回来指向函数的指针第一个参数是...