jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
本文实例讲述了jquery UI实现autocomplete在获取焦点时得到显示列表功能。分享给大家供大家参考,具体如下:
在做项目的时候,客户有这样的需求,将以前输入过的内容,在某个文本框上用列表的形式提示出来,可以选择,换言之,就如同我们用谷歌搜索,或者百度搜索一样,输入一些关键词,会自动提示,这个功能就叫autocomplete. 当然在 jquery UI 下有 插件,具体下载的地方,搜索就知道了。重点是,我现在的用法,是需要在文本框获取焦点的时候,就弹出待选择的列表。而传统的是必须在输入文字之后才出现。经过发现,jquery ui autocomplete 用如下方法可以实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!doctype html> <html lang= "en" > <head> <meta charset= "utf-8" > <title>jQuery UI Autocomplete - Categories</title> <link rel= "stylesheet" href= "../../themes/base/jquery.ui.all.css" rel= "external nofollow" > <script src= "../../jquery-1.9.1.js" ></script> <script src= "../../ui/jquery.ui.core.js" ></script> <script src= "../../ui/jquery.ui.widget.js" ></script> <script src= "../../ui/jquery.ui.position.js" ></script> <script src= "../../ui/jquery.ui.menu.js" ></script> <script src= "../../ui/jquery.ui.autocomplete.js" ></script> <link rel= "stylesheet" href= "../demos.css" rel= "external nofollow" > <style> .ui-autocomplete-category { font-weight: bold; padding: .2em .4em; margin: .8em 0 .2em; line-height: 1.5; } </style> <script> var data = [ { label: "anders" , category: "" }, { label: "andreas" , category: "" }, { label: "antal" , category: "" }, { label: "annhhx10" , category: "Products" }, { label: "annk K12" , category: "Products" }, { label: "annttop C13" , category: "Products" }, { label: "anders andersson" , category: "People" }, { label: "andreas andersson" , category: "People" }, { label: "andreas johnson" , category: "People" } ]; function dynamicAutocomplete(){ $( "#search" ).autocomplete({ delay:200, autoFocus: false , source: data, minLength: 0, }).focus( function () { $( this ).autocomplete( "search" ); }); } </script> </head> <body> <button onclick= "dynamicAutocomplete()" >autocomplete</button> <br /> <label for = "search" >Search: </label> <input id= "search" > <div class= "demo-description" > <p>A categorized search result. Try typing "a" or "n" .</p> </div> </body> </html> |
代码来源于官网例子,稍稍改动了一下,但貌似在IE 下有点问题,选择某个选项之后,这个列表框不消失,还一直存在,比较郁闷。
在google 上搜索了一下,发现了一篇文章,也讲到了这个问题。后来用如下方法解决,不过是失去焦点的方式做的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function dynamicAutocomplete(){ $( "#search" ).autocomplete({ minLength: 0, source: data, focus : function () { return false ; }, select: function (event, ui){ $ this = $( this ); setTimeout( function () { $ this .blur(); }, 1); } }).focus( function (){ $( this ).autocomplete( "search" ); return false ; } ); }; |
在ie 下面用了timeout
来解决,在网上看到很多人说,在focus
方法中 return false
就可以解决,但我就是没有测试成功.
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
- jQuery UI AutoComplete 使用说明
- jQuery UI Autocomplete 体验分享
- jQuery UI AutoComplete 自动完成使用小记
- jQuery UI Autocomplete 1.8.16 中文输入修正代码
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
- firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
- jQuery.Autocomplete实现自动完成功能(详解)
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- jquery autocomplete自动完成插件的的使用方法
- jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
- jQuery Autocomplete自动完成插件
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
这篇文章主要介绍了快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突问题,感兴趣的小伙伴们可以参考一下2016-04-04
最新评论