jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框
$("#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当输入框焦点聚焦时自动弹出跟随下拉框的更多相关文章
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选&多选下拉框
先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽 ...
- el-select和el-cascader的visible-change下拉框隐藏时触发相关事件(下拉框下拉显示时不触发)
原文:https://blog.csdn.net/CarryBest/article/details/79959389 今天做项目时,用elementUI框架,需要下拉框隐藏时出发某个函数,用了vis ...
- jquery根据下拉框选择的值显示输入框
原理就是根据下拉框选择的值来控制显示那个输入框: html代码: 首先定义一个下拉框,$serviceTypeList就是后台传过来的所有属性, <div class="uk-form ...
- jquery+html三级联动下拉框及详情页面加载时的select初始化问题
html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel ...
- js:jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery+html三级联动下拉框
jquery+html三级联动下拉框及详情页面加载时的select初始化问题 html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...
- jquery+ligerform三级联动下拉框
如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
- jQuery ui autocomplete下拉列表样式失效解决,三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
随机推荐
- Less的条件表达式
Less的条件表达式 当需要根据表达式,而不是参数的值或数量进行匹配时,条件表达式(Guards)就显得非常有用.如果你熟悉函数式编程的话,对条件表达式也不会陌生. 为了尽可能地接近CSS的语言结构, ...
- JavaScript学习笔记(十五)——对象之Date,RegExp
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
- [对smartMenu.js改进] 解决右键菜单栏在边缘弹出后,移出视图区域无法操作的问题
当用户在视图边缘(如右下角)右键召唤菜单栏的时候,菜单仍然从选中元素的右下角弹出,这时二级菜单栏一般都离开了视图区域,用户无法进一步操作. 这个问题挺常见的,原作者的留言板: 但是作者应该是已经不再维 ...
- NSUserDefault
NSUserDefault是Cocoa提供的默认应用程序状态保持接口.它提供了简化的plist文件持久化方法.通过NSUserDefault类,你可以把用户首选项保存到plist文件中.到应用程序结束 ...
- 一些公司对quantitative的要求
来自日月光华BBS: Company: UBS AG Job Title: Quantitative Developers / Analysts (Entry Level, Multiple Posi ...
- openstack集群环境准备
#0.openstack集群环境准备 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #openstack集群环境准 ...
- 上班打卡--- 通过批处理命令执行jar文件来记录上班时间
如果 一个程序员要记录自己上班工作时间的话 ,还需要靠手动去记录, 那就有点 不够范了, 程序员自然要有自己的极客范儿 , 下面就跟我一起来(zhuangbi); 先列一下整体的步骤: 1: 先做一个 ...
- CSS书写规范与理论
前端体系的变化可谓是日新月异,短短一年时间,从理论.框架.构建工具.甚至开发语言都发生非常大的变化. 随着新项目就即将启动,我抽时间回顾了一下以往项目的前端架构,零零散散产生了许多想法,尽量一一记录下 ...
- salesforce零基础学习(八十四)配置篇: 自定义你的home page layout
当我们进入salesforce系统或者切换app后,默认第一个看到的就是home页面.home页面简单的来说可以包括左侧(narrow component)和右侧(wide component)两部分 ...
- Nginx的反向代理与负载均衡
1.1 集群是什么 简单地说,集群就是指一组(若干个)相互独立的计算机,利用高速通信网络组成的一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服器.这些服务器之间可 ...