AJAX 自动完成支持多选的下拉列表比JQuery.autocomplete 更好!(有实例)下载

weixin_39821260 2019-11-06 10:00:15

Web输入框自动提示,可多选,每个选项可单独删除. 框内显示的是Text的值,表单提交可以得到value值.类似select控件
相关下载链接：//download.csdn.net/download/mike32/3092563?utm_source=bbsseo

...全文

94 回复打赏收藏转发到动态举报

写回复

用AI写文章

切换为时间正序

请发表友善的回复…

发表回复

Web输入框自动提示,可多选,每个选项可单独删除. 框内显示的是Text的值,表单提交可以得到value值.类似select控件

demo，可直接运行查看效果，实现的效果是：在输入框中输入汉字时触发keyup事件，即自动出现多个选项，选中某选项时自动将该选项值和所需属性填充到指定输入框中。

运用jquery.autocomplete.js 和jquery.autocomplete.css实现文本框自动补全，直接下载可以看到运行效果，带注释

自动查询的显示的空控件，jquery.autocomplete.js和jquery.autocomplete.css文件

项目中有一个城市导航，导航上有一个城市搜索，即用户输入城市名、或拼音即可有匹配的提示，方便用户选择。于是乎下载了一个jquery.autocomplete-1.1.3，但引用到项目后，发现几个问题，并相应做了修改： 1.中文输入后，服务端不能正常获取ajax提交的数据（此处，当然可以用相应转码，本人试了n种方便仍改），细看代码发现，是用 $.get(this.serviceUrl, me.options.params, function(txt) { me.processResponse(txt); }, 'text'); 提交的，于是改成了我熟悉的提交方式。 $.ajax({url:this.serviceUrl,data:"query="+me.options.params.query,timeout: 5000,success: function(o){me.processResponse(o);}}); 问题立即解决。猜想，是默认utf-8编码与我服务端过滤器中转码以及代码的转码发生了冲突。 2.当输入框值发生变化时，onchange事件不灵敏。于是，添加了一个函数，输入值一但onchange就调用。 onKeyProcessDefult: function(i) { var me, fn, s, d; me = this; s = me.suggestions[i]; d = me.data[i]; if(this.currentValue!=s || undefined==d){d="";s="";} this.selectedIndex=0; //输入时，一但有匹配的项，就默认选择第一项,这样，再按回车键，即可直接submit提交 jht添加 2011-07-20 $(".auto_selected_val").val(d); } 3. 当输入正确值，而不去选择相应提示项时，按回车键，不能完成自动提交。另外就是，当输入正确值，而不去选择相应提示项进，点击后面的提交按钮，也不能完成提交。（赶集网的城市切换也有这个小瑕疵哦）。于是修改为，一但输入后只有可匹配的项时，就默认选中第一项（代码如上）。这样，再提交就不是问题了。 4.输入值，当没有相应匹配项时，没有任何提示，不友好，影响用户体验。 5.服务服端注意返回json格式参数格试哦{ query:'c',suggestions:['北京','保定','包头','本溪'],data:['hr','cu','cy','cz'] } 项目应用实例：http://www.juyuan.com/members/city 参考实案例：http://www.ganji.com/index.htm

下载资源悬赏专区

13,655

社区成员

12,654,265

社区内容

发帖

与我相关

我的任务

其他技术论坛（原bbs）

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章

AJAX 自动完成 支持多选的下拉列表 比JQuery.autocomplete 更好!(有实例)下载

AJAX 自动完成支持多选的下拉列表比JQuery.autocomplete 更好!(有实例)下载