$("#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. springboot学习(二)——springmvc配置使用

    以下内容,如有问题,烦请指出,谢谢 上一篇讲解了springboot的helloworld部分,这一篇开始讲解如何使用springboot进行实际的应用开发,基本上寻着spring应用的路子来讲,从s ...

  2. 用vue2.x注册一个全局的弹窗alert组件

    一.在实际的开发当中,弹窗是少不了的,默认系统的弹窗样式太丑,难以满足项目的实际需求,所以需要自己定义弹窗组件,把弹窗组价定义为全局的,这样减少每次使用的时候引入麻烦,节省开发时间.本文将分享如何定义 ...

  3. viewer.js的简单练习

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

  4. bootstrap fileinput上传返回400,404,500 等错误替换

    $(".uploadfile").on('filebatchuploaderror', function(event, data, msg) { $(".file-err ...

  5. 驱动调试-根据oops定位错误代码行

    1.当驱动有误时,比如,访问的内存地址是非法的,便会打印一大串的oops出来 1.1以LED驱动为例 将open()函数里的ioremap()屏蔽掉,直接使用物理地址的GPIOF,如下图所示: 1.2 ...

  6. codeforge免费下载账号 积分账号 共享账号

    codeforge网站下载代码很好,没有积分怎么办?那么多好的matlab代码,matlab程序,C,JAVA等等,都要充值啊!!! 请用下面共享的codeforge账号密码========> ...

  7. 【微信小程序开发】快速开发一个动态横向导航模板并使用

    目标:做个横向导航,可以横向滚动. 思路:使用scroll-view组件,可实现横向滚动功能.scroll-view内包含一个动态的view列表,代表导航的每一项,导航要接收动态数组,然后使用列表展示 ...

  8. [C#]使用IFormattable接口来实现字符串格式化

    本文为原创文章.源代码为原创代码,如转载/复制,请在网页/代码处明显位置标明原文名称.作者及网址,谢谢! 开发工具:VS2017 语言:C# DotNet版本:.Net FrameWork 4.0及以 ...

  9. 2017最新安装mysql教程及遇到的问题解决Windows下

    今天因为换了个LINUX系统 把我的E盘不小心给卸载了 结果还是不能用  导致 我E盘里面的mysql也都被删除了    所以又要在次重新装一个MYSQL 了    花了很多时间  也看了很多教程.好 ...

  10. Android 通知栏Notification的整合 全面学习 (一个DEMO让你全然了解它)

    在android的应用层中,涉及到非常多应用框架.比如:Service框架,Activity管理机制,Broadcast机制,对话框框架,标题栏框架,状态栏框架.通知机制,ActionBar框架等等. ...