jquery UI实现autocomplete在获取焦点时得到显示列表功能示例


Posted in jQuery onJune 04, 2019

本文实例讲述了jquery UI实现autocomplete在获取焦点时得到显示列表功能。分享给大家供大家参考,具体如下:

在做项目的时候,客户有这样的需求,将以前输入过的内容,在某个文本框上用列表的形式提示出来,可以选择,换言之,就如同我们用谷歌搜索,或者百度搜索一样,输入一些关键词,会自动提示,这个功能就叫autocomplete. 当然在 jquery  UI  下有 插件,具体下载的地方,搜索就知道了。重点是,我现在的用法,是需要在文本框获取焦点的时候,就弹出待选择的列表。而传统的是必须在输入文字之后才出现。经过发现,jquery ui autocomplete 用如下方法可以实现

<!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 上搜索了一下,发现了一篇文章,也讲到了这个问题。后来用如下方法解决,不过是失去焦点的方式做的。

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实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 #jQuery
一文快速了解JQuery中的AJAX
May 31 #jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 #jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 #jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
You might like
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
Python新手入门最容易犯的错误总结
2017/04/24 Python
python发送告警邮件脚本
2018/09/17 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
设计总监岗位职责
2013/12/07 职场文书
办公室前台岗位职责
2014/01/04 职场文书
装修设计师求职信
2014/02/26 职场文书
运动会演讲稿300字
2014/08/25 职场文书
倡议书的写法
2014/08/30 职场文书
详解Redis主从复制实践
2021/05/19 Redis