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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery实现的中英文切换功能示例
Jan 11 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
javascript测试题练习代码
2012/10/10 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
python编程使用协程并发的优缺点
2018/09/20 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python async with和async for的使用
2019/06/20 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
银行自荐信怎么写
2015/03/05 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android