jquery - 修改 jQuery Autocomplete 插件以在未找到结果时返回新行

Question

我们使用jQuery Autocomplete 插件使用静态数据集进行好友查找搜索（即，我们在页面上加载了好友数组，而不是通过 AJAX 查找）。我们想修改插件以在没有找到结果时注入一个结果，就像一行有名字Search for "Input Value" instead但运气不太好。

有没有人有修改过的源来添加这样的功能？

Answer 1

You can use the response callback:

 $(function () {
     var list = [
         "a",
         "b"];
     $("#i").autocomplete({
         source: list,
         response: function (event, ui) {
             var results = ui.content;
             if (results.length === 0) {
                 results.push({
                     label: "Search for '" + $("#i").val() + "' instead"
                 });
             }
         }
     });
 });

Here's a fiddle.

Answer 2

您可以使用自己的功能自定义自动完成source功能：

$(elem).autocomplete({
    source: function (request, response) {
        var noResults = [ { label: 'Search for "Input Value"', value: -1 } ];
        try {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
            var matchingFriends = $.grep(friendsArray, function(value) {
                // check if search token matches a friend
                if (matcher.test(value.username)) {
                    // add necessary properties for display in autocomplete
                    value.label = value.username;
                    value.value = value.id;
                    return true;
                }
                return false;
            });
            return matchingFriends;
        }
        catch (err) {
            response(noResults);
        }
        response(noResults)
    }
});

查看源代码以了解这是如何在 jQuery-UI 中实现的，以获得更多想法。