js autocomplete实现下拉模糊查询

[size=medium][color=red][b]1.js编写[/b][/color][/size]

// 获得焦点是重新进行查询
$("#xxx").focus(function () {
$("#xxx").autocomplete("search");
});
// 检索信息(模糊匹配)
$("#xxx").autocomplete({
scrollHeight:180,
scroll:true,
delay: 500,//延迟500ms便于输入
source: function (request, response) {
$.ajax({
url: '${ctx}/xx/xxxx',
type: "post",
dataType: "json",
data: {"xxx": $("#xxx").val()},
success: function (data) {
var obj = $.parseJSON(data.data);
var dataArr = obj.data;
response($.map(dataArr, function (item) {
return {
result: item,
label: item.name,
value: item.code
}
}));
}
});
},
select: function (event, ui) {
$("#xx").val(ui.item.label);
$("#xx").val(ui.item.value);
$("#xxxx").val(ui.item.result.id);
$("#xx").val(JSON.stringify(ui.item.result));
return false;
}
});


[size=medium][color=red][b]2.设置下拉框(加入下面css代码即可)
[/b][/color][/size]

.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
html .ui-autocomplete {
height: 300px;
}


[size=medium][color=red][b]3.引入相应文件[/b][/color][/size]
引入附件内容
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值