$("#search").autocomplete({

            minLength: 0,

            source: function(request,response){

                // request对象只有一个term属性，对应用户输入的文本

                // response是一个函数，在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表

                var dataObj = kwplan._getjsondata(request);

                response(dataObj);

            },

            focus :function () {

                 return false;

              },

             select: function(event, ui){

                 $this = $(this);

                // 这里的this指向当前输入框的DOM元素

                // event参数是事件对象

                // ui对象只有一个item属性，对应数据源中被选中的对象

                var event = event||window.event;

                this.value = ui.item.label;

                $("#teacherid").val(ui.item.category);

                // 必须阻止事件的默认行为，否则autocomplete默认会把ui.item.value设为输入框的value值

                event.preventDefault();

                setTimeout(function () {

                    $this.blur();

                   }, 1);

              }

    }).focus(function(){

                 $(this).autocomplete("search");

                 return false;

   }

);
<!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">

    <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">

    <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({
            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;
            }    
        );
    };

    </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>

jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框的更多相关文章

  1. 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...

  2. el-select和el-cascader的visible-change下拉框隐藏时触发相关事件（下拉框下拉显示时不触发）

    原文:https://blog.csdn.net/CarryBest/article/details/79959389 今天做项目时,用elementUI框架,需要下拉框隐藏时出发某个函数,用了vis ...

  3. jquery根据下拉框选择的值显示输入框

    原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...

  4. jquery+html三级联动下拉框及详情页面加载时的select初始化问题

    html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel ...

  5. js：jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  7. jquery+ligerform三级联动下拉框

    如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...

  8. Jquery ui autocomplete简单api

    重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...

  9. jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,

    jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...

随机推荐

  1. NETStandard,NETFx,Mono,NETCore,ASPNetCore 之间关系的整理

    因为现在很多人对这几者之间的关系还不甚了解,这里根据我所知来做一个大概的介绍...... .NET Standard:         .NET标准,只要符合这个标准实现类库,即可在支持此标准的Run ...

  2. （ajax）——jquery用法

    例子:/* ajax获得状态 */                点击事件  $("#findBycname").click(function(){  var company = ...

  3. hotspot虚拟机的调试

    3这篇文章,怎么说呢.是踩了很多坑得出来了,也是在自己快要崩溃的时候得出来了的. 连续踩了差不多10来个小时的坑,还好是出来了. 这篇文章是调试虚拟机的,其实网上也能找到一些文章,但是每个人的环境不一 ...

  4. css选择器的优先级问题

    当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢? 定义的属性有冲突时,浏览器会选择用那一套样式呢,下面来 ...

  5. NGUI_01

    序言:这是张三疯第一次开始NGUI插件的学习,刚开始学习,肯定有很多漏洞,后期会及时的补上的.希望大家可以见谅,希望大佬多多指教. 扩充:为提供和我一样的小白找不到免费的NGUI插件,这里分享百度网盘 ...

  6. 自动化运维工具——ansible详解（一）

    ansible 简介 ansible 是什么? ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.chef.func.fabric)的优点,实现了批量系统 ...

  7. 使用python将多个excel合并

    最近看视频学习,老师布置了个作业,关于如何使用python将多个excel进行合并,老师写的代码我感觉比较复杂,下面是我自己改良之后较简单的方式. 实现这个功能主要有两种方法,一种是用xlwd,xls ...

  8. 可以在手机上看电脑本地html步骤，我自己总结的哦！

    1.打开控制面板 2.打开程序和功能 3.打开或关闭功能 4.internet信息服务展开后里面所有的都要选中 5.回到桌面,然后右键计算机,选择'管理' 6.先在E盘或者D盘创建一个文件夹,自己随意 ...

  9. 关于promise的详细讲解

    到处是回调函数,代码非常臃肿难看, Promise 主要用来解决这种编程方式, 将某些代码封装于内部. Promise 直译为"承诺",但一般直接称为 Promise; 代码的可读 ...

  10. Linux 使用tcpdump观察arp通信过程

    ARP协议简介: ARP协议能实现任意网络层地址到任意物理地址的转换,此次讨论从IP地址到以太网地址(MAC地址)的转换.其工作原理是:主机向自己所在的网络广播一个ARP请求,该请求包含目标机器的网络 ...