之前使用过此 widget,如今再次需要,发现很多东西已经记不起来了,当然之前用的版本也不一样。
使用之前当然是先认真阅读官方的说明文档和示例,这点很重要,而不是东一块西一点的去网上瞎找资料。Options,Methods,Events 区分的很详细,参考 jQuery Autocomplete Widget API DOC 。
我需要的场景是,一个文本框,根据动态输入,ajax get data source,select 结果后做些 dom 操作。这是一个简单场景,当然我需要的其实很复杂,后面讲。先说我遇到的问题。
先看使用代码:
function registerAuto() {
var autoId = "cust-code";
$("#" + autoId)
.autocomplete({
source: function(request, response) {
var term = $.trim(request.term);
//term.replace("$", "") only replace the first match one
if (term.length === 0 || $.trim(term.split("$").join("")).length === 0) {
return;
}
$.ajax({
url: "/order/aeo/customer",
method: "post",
dataType: "json",
data: { keywords: term },
success: function(data) {
response(data);
}
});
},
delay: 800,
autoFocus: true,
minLength: 2,
position: { my: "left bottom", at: "left top" },
select: function(event, ui) {
//console.log(ui);
showCustomer(ui.item.value);
},
change: function(event, ui) {
//console.log(ui);
if (!ui.item) {
$("#" + autoId).val("");
hideCustomer();
}
}
});
}
问题一:
有一个初始值,当页面加载后,赋值文本框,自动执行搜索,然后选取记录(single item 只有一条结果记录)。为什么这样做,是因为需要触发 select 事件。
该怎么办呢?
解决方案:
1、最简单的办法就是:赋值文本框,然后手动调用 select 里面需要执行的方法,不需要执行 autocomplete。
$(function() {
registerAuto();
$("#cust-code").val("@Model.CustomerCode");
showCustomer("@Model.CustomerCode");
});
如上代码就行了,但是本人很倔,就是要 autocomplete 方式,手动的去调用它的方法去触发事件。
2、开始以为,只要 focus 文本框,然后赋值文本就会触发自动搜索事件,结果是根本不行的。
辛苦搜索了很多资料,以 jquery autocomplete manually search 关键信息才找到解决方法。
$(function() {
registerAuto();
$("#cust-code").val("@Model.CustomerCode");
$("#cust-code").autocomplete("search");
});
代码触发 search 事件,但问题又来,怎么实现自动 select 结果呢?使用的是投机的方式,根据生成的 items ui 去 click 标签。
$(function() {
registerAuto();
$("#cust-code").val("@Model.CustomerCode");
$("#cust-code").autocomplete("search");
setTimeout(function() {
$(".ui-menu-item").click();
}, 100);
});
其中的 setTimeout,是为了有足够的时间等待 ajax 返回结果。
好了上面问题是解决了,但一个终极问题,应该也是很多人遇到的问题,却需要亟待解决。
问题二:
ajax 返回结果太多,如何动态分页的去获取结果,而不是一次性加载呢?
解决思路:
自己想到了一个方案:搜索结果有滚动条,当滚动条到底部时,自动加载下一页结果,直到全部加载完。其实,用户可能只加载几页,找不到结果就换关键词重新搜索了。
但遇到的难题是:怎么把动态加载的结果,append 到 autocomplete 的 data source 里面,因为其他事件(如 select )需要。
又想到的解决是:修改 autocomplete 源码,增加扩展方法;或者绑定事件到 items ui 上,如 scroll bar 加载方法,click select 方法等。
解决方案:
总之目前没有实现,不知道诸君有何建议?
2016-11-25
最近的使用,又有一些新的需求,然后又找到了一些解决方案,总之是越用越顺手了。
问题三:
autocomplete 默认接受的对象是这样的 { label : "label", value : "value" } ,但使用时需要显示更多的 label 数据,以及需要获取除 value 之外的其他数据,怎么办呢?
简单的解决办法:
lablel 拼接数据显示,但不能用 html 做丰富显示,因为都当作字符串。
value 也以一定规则拼接,但是最后 value 要展示在 input 中,看起来很不友好。
终极解决方案:
使用 _renderItem 扩展解决 label 问题,自定义显示内容;
由于 autocomplete 是将 source 保存起来的,因此 response(data) 的时候去了 label 和 value 外,可以自定义其他属性,或者 label 使用一个对象。
$(".auto-stock")
.autocomplete({
source: function(request, response) {
var term = $.trim(request.term);
if (term.length === 0) {
return;
}
$.getJSON("/api/query",
{ keyword: term },
function(data) {
//data 类型假设是 { id, code, name, type }
response($.map(data,
function() {
return { label: data, value: data.name };
//或者
//return { label: name, value: data.name, code : data.code, id : data.id };
}));
});
},
delay: 100,
autoFocus: true,
minLength: 2,
position: { my: "left top", at: "left buttom" },
select: function(event, ui) {
//console.log(ui.item);
//这里可以获得自定义 label 对象,或者其他属性
setQuery(ui.item.label);
},
change: function(event, ui) {
//console.log(ui);
if (!ui.item) {
$(this).val("");
}
}
})
.data("ui-autocomplete")
._renderItem = function(ul, item) {
return $("<li>")
.attr("data-value", item.value)
//自定义显示 ui
.append("<div><dd>" + item.label.code + "</dd><dd>" + item.label.name + "</dd><dd>" + item.label.type + "</dd></div>")
.appendTo(ul);
}
对 autocomplete 的使用又多了一些心得,其他下次有需要时,解决掉 pagination 的问题。