废话不多说，先看效果！~
需要引入的资源如下
计算
安全
数据库
网络和加速
企业服务
<link rel="stylesheet" href="/css/jquery.autocomplete.css" type="text/css">
<script type="text/javascript" src="/lib/jquery.min.js"></script><!--1.8.3-->
<script type="text/javascript" src="/js/jquery.autocomplete.js"></script>前端代码
<div class="control-group span6">
<label class="control-label">客户名</label>
<div class="controls">
<input type="text" id="q-customerName" name="customerName" class="form_value ac_input" autocomplete="off">
<input type="hidden" id="q-customerId" name="customerId" class="form_value" validate="n" value="0"><!-- 默认值为0 -->
</div>
</div>Javascipt代码
$("#q-customerName").autocomplete("/CustomerName/getCustomerNameSuggestion.do",{
max:10,//最多5条记录
minChars:1,
scrollHeight: 250,
width:206,
dataType:'json',//返回的数据类型为JSON类型
extraParams: {
"customerName": function () {
return encodeURIComponent($("#q-customerName").val());
}
},
parse:function(data) {//解释返回的数据，把其存在数组里
var parsed = [];
for (var i = 0; i < data.length; i++) {
parsed[parsed.length] = {
data: data[i],
key: data[i].key,
value: data[i].value,
result: data[i].value //返回的结果显示内容
};
}
if (data.length == 0) {
parsed.push({
data: {
"key": "0",
"value": "无搜索结果"
},
key: "0",
result: "无搜索结果"
});
}
return parsed;
},
formatItem: function(item) {//显示下拉列表的内容
return item.value;
},
formatMatch: function(item) {
return item.value;
},
formatResult: function(item) {
return item.value;
}
}).result(function(event, item, formatted) {//把返回的结果内容显示在其他文本框上
$("#q-customerId").val(item.key);
if(item.key == 0){
$("#q-customerName").val("");
}
});后端返回的json数据格式如下
[
{
"key": "5133",
"value": "上海**有限公司"
},
{
"key": "5197",
"value": "上海**用品有限公司"
},
{
"key": "5202",
"value": "上海**传播有限公司"
},
{
"key": "5234",
"value": "上海**用品有限公司"
},
{
"key": "5319",
"value": "上海**用品有限公司"
},
{
"key": "5402",
"value": "上海**用品有限公司"
},
{
"key": "5500",
"value": "上海**有限公司"
},
{
"key": "5581",
"value": "上海**用品有限公司"
}
]Firefox下有个小bug，使用搜狗输入法输入中文时不触发antocomplete事件。正在解决。
测试发现JQuery1.9及以上不兼容，项目中使用的是1.8.3
这东西没啥技术含量，就是麻烦，记录一下避免以后在同样的问题上浪费时间。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
