jQuery UI Autocomplete若干知识点小结

简单示例：

obj.autocomplete({
                source: function (request, response) {
                    doAjax("fee/GetPrice", "{'wldm':'" + request.term + "'}", function (data) {
                        response($.parseJSON(data.d).Table);
                    });
                },
                search: function () {
                    var term = extractLast(this.value);
                    if (term.length < 2) {
                        return false;
                    }
                },
                focus: function () {
                    return false;
                },
                select: function (event, ui) {
                    var terms = ui.item.wldm;
                    this.value = terms;
                    setFieldValue(this, ui.item.bzdj);
                    return false;
                }
            }).autocomplete("instance")._renderItem = function (ul, item) {
                return $('<table width="240px"></table>')
                        .data("item.autocomplete", item)
                        .append('<tr><td style="width:160px;">代码：' + item.wldm + '</td><td style="width:80px;text-align:right">￥' + item.bzdj + '</td></tr>')
                        .appendTo(ul);
            };

动态生成录入框（采用复制html方式）后，绑定自动完成功能，发现不起作用，发现jquery ui生成的标记(类似：jQuery110200319953157533831)重复（因为是复制的，肯定重复了），jqueryui应该是按照标记，如果遇到相同的标记，让第一个控件起作用了。于是想着怎么去掉这些标记，后来在官网找到destroy方法。调用也简单明了：

obj.autocomplete("destroy");

上述问题解决后，页面功能基本上开发完毕。但测试时遇到一个问题，录入控件需要在不同模式下进行不同的动作。如：模式1下，控件手工输入；模式2下控件需要通过autocomplete远程加载数据。这时候，如果录入控件从手工模式切换到远程调用模式时，调用destroy方法，jqueryUI会报错。

cannot call methods on autocomplete prior to initialization; attempted to call method 'destroy'

于是有了下面的判断方法（来源）：

if ($target.hasClass('ui-autocomplete')) {
    $target.autocomplete('destroy')
}

于是，基本上解决了jqueryui autocomplete组件在使用过程中遇到的一些零零碎碎问题。