jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框
2024-10-16 03:36:27
$("#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>
最新文章
- OpenCV成长之路(2):图像的遍历
- RPC应用的java实现(转)
- 软件包管理 之 RPM 基础 《RPM 的介绍和应用》
- HDU 4900 NO ACM NO LIFE(概率+枚举+搜索)(2014 Multi-University Training Contest 4)
- 在js自定义函数中使用$(event.target)代替$(this)
- wamp 提示 Directive allow_call_time_pass_reference is no longer avaiable in PHP
- Android开发手记(14) 使用MediaPlayer播放mp3
- stringstream字符串流
- c++ virturn function -- 虚函数
- sqoop数据迁移(基于Hadoop和关系数据库服务器之间传送数据)
- SAP Solution Manager 能够连接到 SAP Service Marketplace
- req、js
- windows开启powershell在此系统中禁止执行脚本
- Database学习 - mysql 数据库 数据操作
- linux grep 正则表达式
- 高并发秒杀系统方案(JSR303参数校验)
- ES6学习--箭头函数
- .Net WEB 程序员需要掌握的技能
- JBPM4.4_管理流程定义
- PL/SQL之包