Question

我们正在使用jQuery Autocomplete plugin进行带有静态数据集的朋友查找搜索（即我们在页面上加载了friends数组，而不是通过AJAX查找）。我们想要修改插件，以便在没有找到结果的情况下注入结果，例如名为Search for "Input Value" instead的行，但没有太多运气。

是否有人有修改后的源添加了这样的功能？

Answer 1

您可以使用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)
    }
});

查看source code，了解如何在jQuery-UI中实现更多创意。

修改jQuery自动完成插件，以便在找不到结果时返回新行

2 个答案: