用于前端可通过关键字从数据库匹配需要的数据,绑定下拉表,实现智能下拉框的功能。绑定点击事件可实现选中数据后执行的操作。
IntelligentPerceive()Contents
- IntelligentPerceive()
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/_css/Intelligent.css" />
<link href="/_css/manage.css" rel="stylesheet" type="text/css" />
<script src="/_js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/_js/Valid.js" type="text/javascript"></script>
<script src="/_js/common.js" type="text/javascript"></script>
<script src="/_JS/Intelligent.js" type="text/javascript"></script>
<script src="download.js" type="text/javascript"></script>
</head>
<body>
<div class="div_search">
<em class="em_input"><input class="txt serach_user" type="text"
maxlength="20" _id='0' /><i></i></em>
</div>
</body>
行绑定事件
示例:
new DropdownItem({ dropdown: serach_user.next(),
input: serach_user,
tag: $('body'),
default_value: '请输入内容’,
class_name: 'search_size',
url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
bindRow: function (data) {
return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
}
});
展示效果:
行单击事件
示例:
new DropdownItem({ dropdown: serach_user.next(),
input: serach_user,
tag: $('body'),
default_value: '请输入内容’,
class_name: 'search_size',
url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
bindRow: function (data) {
return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
}, clickRow: function (row)
{
alert("选择行事件");
} });
展示效果:
键盘输入回调事件
示例:
new DropdownItem({ dropdown: serach_user.next(),
input: serach_user,
tag: $('body'),
default_value: '请输入内容’,
class_name: 'search_size',
url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
bindRow: function (data) {
return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
}, keyup_Callback: function (input)
{
alert("键盘输入事件");
} });
展示效果:
移入行事件
示例:
new DropdownItem({ dropdown: serach_user.next(),
input: serach_user,
tag: $('body'),
default_value: '请输入内容’,
class_name: 'search_size',
url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
bindRow: function (data) {
return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
}, rowHover: function (index)
{
alert("移入行事件");
} });
展示效果:
关闭后回调事件
示例:
new DropdownItem({ dropdown: serach_user.next(),
input: serach_user,
tag: $('body'),
default_value: '请输入内容’,
class_name: 'search_size',
url: "/handler/users/User.ashx?type=list&index=1&size=6&total=6&key=" + "",
bindRow: function (data) {
return '<li class="search_li" _id="{0}">{1}</li>'.format(data.user_id, data.user_name);
}, closed_Callback: function ()
{
alert("关闭后回调事件");
} });
展示效果: