我用的是jquery.autocomplete-1.1.3实现autocomplete 效果，不带默认选项。
但客户要求默认选中第一个，研究demo也没有发现这个功能，然后我想用模拟键盘事件来处理，但Chrome浏览器的keyCode赋值好像不好用（可能是我不会用？）。我就想能不能用鼠标事件实现，用鼠标在下拉列表上move了一下，发现列表是对鼠标move有感应的。然后就加了个onmove事件，位置加在选项内容拼接前，
我以为把坑填上了，没想到自己又挖了更多坑。。
坑1：如果页面上有多个输入框要autocomplete，需要用className来区分不同的列表。
坑2：如果只有一个选项，默认选不上，经查是选项拼接完成前做的默认，拼接完成后没有在走，为此不得不在动态数据读取完成的时候也加了事件。
坑3：在移动端上访问，选项点选会不好用，怎么选也是第一个，我加上个浏览器判断好用了。
上代码：
<link rel="stylesheet" href="/js/jquery.autocomplete-1.1.3/jquery-ui.min.css">
<script src="/js/jquery.autocomplete-1.1.3/jquery.min.js"></script>
<script src="/js/jquery.autocomplete-1.1.3/jquery-ui.min.js"></script>
<script type="text/javascript">
//首行默认选中的公共方法
function firstFocus(classname){
if(!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {//非移动端才执行
//用了延迟加载技术
setTimeout(function(){
$(classname+":first").mouseover();
},1);
}
}
//autocomplete代码
$(function() {
$("#cstmCode").autocomplete({
minLength : 1,
source: function(request, response) {
$.ajax({
url: "/***********.action",
dataType: "json",
data: {
source: $("#cstmCode").val()
},
success: function(data) {
response(data);
firstFocus('.li_customer1');//对样式中包含li_customer1的li元素加事件
}
});
},
focus : function(event, ui) {
return false;
},
select : function(event, ui) {
select(ui);
return false;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {//选项内容拼接
firstFocus('.li_customer1');//对样式中包含li_customer1的li元素加事件
if(item!=null&&item.accountId)
{
return $("<li class='li_customer1'>").append( //添加了自定义的class，用于区分不同的列表
"<a>" + item.cstmCode + " | " + item.cstmName + " | "+ item.accountName+ "</a>")
.appendTo(ul);
}
return $("<li>").append("<a>没有查到相关数据</a>").appendTo(ul);
};
if($("#cstmName").length>0){
$("#cstmName").autocomplete({
minLength : 1,
source: function(request, response) {
$.ajax({
url: "/system/goods/autoComplete!findAllCustomer.action",
dataType: "json",
data: {
source: $("#cstmName").val()
},
success: function(data) {
response(data);
firstFocus(".li_customer2");
}
});
},
focus : function(event, ui) {
return false;
},
select : function(event, ui) {
select(ui);
return false;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
firstFocus(".li_customer2");
if(item!=null&&item.accountId)
{
return $("<li class=\"li_customer2\">").append(
"<a>" + item.cstmCode + " | " + item.cstmName + " | "+ item.accountName+ "</a>")
.appendTo(ul);
}
else{
return $("<li>").append("<a>没有查到相关数据</a>").appendTo(ul);
}
};
}
var select=function(ui){
if($("#cstmName").length > 0) {
$("#cstmName").val(ui.item.cstmName);
}
if($("#cstmId").length>0)
{
$("#cstmId").val(ui.item.cstmId);
}
if($("#cstmCode").length>0)
{
$("#cstmCode").val(ui.item.cstmCode);
}
if($("#accountId").length>0)
{
$("#accountId").val(ui.item.accountId);
}
if($("#accountName").length>0)
{
$("#accountName").val(ui.item.accountName);
}
}
});
</script>
网友评论