jQuery Autocomplete 备忘录
之前使用过此 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 的问题。
