交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 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自动完成插件

    广而告之:
    热门推荐:
    在centOS 7安装mysql 5.7的详细教程

    参考官方文档:https://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/  首先创建一个repo文件 vim /etc/yum.repos.d/mysql-community.repo 然后根据官方文档写入: 比如在centOS 7安装mysql 5.7 [mysql57-community] name=MySQL 5.7 Community Server baseurl=htt···

    scrollTop 用法说明

    下面的演示中,外层元素的高度值是200px,内层元素的高度值是300px。很明显,“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时,有部分内容会隐没在“外层元素的上边界”之外,scrollTop就等于这部分“不可见的内容”的高度。 演示:(拖动滚动条,可以看到scrollT···

    Vue组件选项props实例详解

    前面的话   组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项。在 Vue 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props 静态···

    HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能

    准备做一个网页版聊天界面,表情啊、图片啊、上传文件啊都应该要有,视频就算了,语音还是要的。 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器。 录音代码 本示例代码支持PC、Android、IOS(仅Safari)中使用,如果用RecordApp可增加对IOS(微信浏览器、···

    js网页中随意拖动的小方块实现代码

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章: JavaScript随机生成颜色的方法 js随机生成网页背景颜色的方法 javascript生成随机颜色示例代码 js生成随机颜色方法代码分享(三种) JavaScript实现简单生成随机颜色的方法 js随机颜色代码的多种···

    php读取数据库信息的几种方法

    <? $dbh = @mysql_connect("localhost:3306","root","9999"); /* 定义变量dbh , mysql_connect()函数的意思是连接mysql数据库, "@"的意思是屏蔽报错 */ if(!$dbh){die("error");} /* die()函数的意思是将括号里的字串送到浏···

    php简单封装了一些常用JS操作

    在web编程中大家应该会经常用到一些常用js操作,例如 alert(),通常是遇到了再写,受公司的启发,我自己简单写了个类来自动生成这些js,目的就是为了方便,一个小玩意,新手们也许会喜欢^_^ [php] <?php /* *页面:makeJs.class.php *功能:封装常用的JS代码,···

    js正则查找match()与替换replace()用法实例

    本文实例讲述了js中正则的查找match()与替换replace()的用法。分享给大家供大家参考。具体如下: 复制代码 代码如下:<html> <head> <script type="text/javascript"> //string.match(正则):正则查找字符串,返回符合正则的字符或字符串 function t1(){ &nbs···

    Laravel 验证码认证学习记录小结

    注:此处所用的注册等系列功能,均作用于 laravel 自带的用户认证机制 注册验证码 1. composer 安装验证码 composer require "mews/captcha:~3.0" 2. 运行以下命令生成配置文件 config/captcha.php php artisan vendor:publish --provider='Mews.aptcha.aptchaServiceProvi···

    Linux(Ubuntu)下搭建ASP.NET Core环境

    今天来学习一下ASP.NET Core 运行在Ubuntu中。无需安装mono 。 环境 Ubuntu 14.04.4 LTS 服务器版 全新安装系统。 下载地址:http://mirrors.neusoft.edu.cn/ubuntu-releases/14.04.4/ubuntu-14.04.4-server-amd64.iso 你也可以下载桌面版安装。 下载地址:http://mirrors.neus···