VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • jquery UI实现autocomplete在获取焦点时得到显示列表功能示例

    本文实例讲述了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常见事件用法与技巧总结》、《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自动完成插件

    广而告之:
    热门推荐:
    织梦网页中禁止鼠标右键各种经典代码

    有时自己辛苦半天做的网页,尤其是一些javascript特效,很容易被人利用查看源文件而复制。那么如何才能防止被人查看源代码呢?   为大家搜集了一些网页中禁止鼠标右键代码及各种经典代码。   点击右键弹出提示信息 <SCRIPT langua···

    Vue无限滑动周选择日期的组件的示例代码

    之前在做一个手机端项目的时候,需要一个左右滑动(按周滑动)选择日期插件,而且当时这个项目没有用到Vue。当时又没有找到合适的第三方插件,就花了点时间用原生JavaScript写了出来,当时心中就想把它写成基于Vue的组件,这短时间闲了把它弄出来了!,在这个过程中遇到了一个···

    基于JS实现带动画效果的流程进度条

    当在使用流程的时候,比如有一个审核流程,有三个阶段:开始,审核中,审核成功。当在不同的阶段,做相应的进度显示,当显示时,是以动画的形式显示的。话不多说,我们开始打造吧。     首先,我考虑的是使用canvas来打造这个控件,于是我现在demo.html里新建了···

    使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

    一、问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌···

    动态加载JavaScript文件的3种方式

    以下是遇到的几种动态加载JavaScript文件的方式,持续更新中。。。 一、使用document.write/writeln()方式 该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方式会导致整个页面重绘。 实现方式: 复制代码 代码如下:document.writeln("<script src=\"http://l···

    你可能不知道PHP get

    定义和用法: get_meta_tags — 从一个文件中提取所有的 meta 标签 content 属性,返回一个数组 语法: 复制代码 代码如下:array get_meta_tags(string filename, int [use_include_path]);#打开 filename 逐行解析文件中的 <meta> 标签。解析工作将在 </head> ···

    织梦图集图片{dede:productimagelist}标签自动编号

    在织梦图集内容页调用图集的时候,如果使用某些幻灯片特效或者jquery插件,会用到ID编号什么的,本教程将教会你如何给图集图片自动编号,也就是说,让{dede:productimagelist}标签支持自动编号。 打开include/taglib/productimagelist.lib.php文件,找到: ···

    php实现的操作excel类详解

    本文实例讲述了php实现的操作excel类。分享给大家供大家参考,具体如下: <?php class Excel { static $instance=null; private $excel=null; private $workbook=null; private $workbookadd=null; private $worksheet=null; private $worksheetadd=null;···

    网页设计教程(4):关于素材和言志

    上一篇网页制作教程:网页设计教程(3):设计步骤及思考 关于收集素材:三遍记忆,让你记住海量素材的准确位置和用途,提高其可用性 这仅仅是一个示意图.在以往的日子里,我做到了只要脑袋里冒出一个想法,立刻就能知道我需要用的素材在什么位置...那时候我很穷,穷到连买书的钱都没有,···

    精通php的十大要点(上)

    1. 在合适的时候使用PHP - Rasmus Lerdorf没有谁比PHP的创建者Rasmus Lerdorf明白PHP用在什么地方是更合理的, 他于1995年发布了PHP这门语言,从那时起,PHP就像燎原之火,烧遍了整个开发阵营,改变了互联网的世界。 可是, Rasmus并不是因此而创建PHP的。 PHP是为了解决···