我用的是jquery.autocomplete-1.1.3实现autocomplete 效果,不带默认选项。
但客户要求默认选中第一个,研究demo也没有发现这个功能,然后我想用模拟键盘事件来处理,但Chrome浏览器的keyCode赋值好像不好用(可能是我不会用?)。我就想能不能用鼠标事件实现,用鼠标在下拉列表上move了一下,发现列表是对鼠标move有感应的。然后就加了个onmove事件,位置加在选项内容拼接前,
我以为把坑填上了,没想到自己又挖了更多坑。。
坑1:如果页面上有多个输入框要autocomplete,需要用className来区分不同的列表。
坑2:如果只有一个选项,默认选不上,经查是选项拼接完成前做的默认,拼接完成后没有在走,为此不得不在动态数据读取完成的时候也加了事件。
坑3:在移动端上访问,选项点选会不好用,怎么选也是第一个,我加上个浏览器判断好用了。
上代码:
//首行默认选中的公共方法
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 $("
"" + item.cstmCode + " | " + item.cstmName + " | "+ item.accountName+ "")
.appendTo(ul);
}
return $("
};
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 $("
"" + item.cstmCode + " | " + item.cstmName + " | "+ item.accountName+ "")
.appendTo(ul);
}
else{
return $("
}
};
}
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);
}
}
});