在 jquery 自动完成中处理没有结果

Question

嘿，当用户当前查询没有结果时，我正在尝试返回一条消息！我知道我需要利用 keyup 事件，但看起来插件正在使用它

Answer 1

您还可以利用“响应”事件来检查这一点。简单但功能强大。 http://api.jqueryui.com/autocomplete/#event-response

response: function (event, ui) {
            if (ui.content.length == 0) {
                //Display an alert or something similar since there are no results
            }
        },

Answer 2

我将以下代码用于相同目的（消息显示在自动完成列表中）：

success: function(data, status, xhr){                       
    if(!data.length){
        var result = [
            {
                label: 'There are no matches for your query: ' + response.term, 
                value: response.term
            }
        ];
        response(result);
    }
    else{
        // normal response
    }
}

Answer 3

这个问题真的过时了，无论如何我正在使用新的 jQuery UI 1.8.16，自动完成现在完全不同了：http://jqueryui.com/demos/autocomplete/#default

无论如何，如果您尝试做与问题相同的事情，则没有更多的 parse 函数，据我所知，没有与搜索结果一起调用的函数。

我设法解决这个问题的方法是覆盖自动完成的过滤器功能 - 注意：这将影响您的所有自动完成

$.ui.autocomplete.filter = function(array, term) {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );

            var aryMatches = $.grep( array, function(value) {
                return matcher.test(value.label || value.value || value);
            });

            if (aryMatches.length == 0){
                aryMatches.push({
                    label: '<span class="info" style="font-style: italic;">no match found</span>',
                    value: null
                });                     
            }

            return aryMatches;
        };

函数从源代码稍作修改，grep调用是一样的，但是如果没有结果我添加一个值为null的对象，然后我覆盖select调用以检查null值。

这为您提供了一种效果，如果您继续输入但没有找到匹配项，您会在下拉列表中看到“未找到匹配项”项，这非常酷。

要覆盖选择调用，请参阅jQuery UI Autocomplete disable Select & Close events

$(this).data('autocomplete').menu.options.selected = function(oEvent, ui){

            if ($(ui.item).data('item.autocomplete').value != null){
                //your code here - remember to call close on your autocomplete after


            }
        };

由于我在页面上的所有自动完成中都使用了它，因此请确保首先检查 value 是否为 null！在您尝试引用不存在的键之前。

Answer 4

您可以尝试提供一个解析选项（处理数据解析的函数），并在没有返回解析的结果时执行您需要的操作。

此示例假设您要返回包含 FullName 和 Address 属性的 JSON 对象数组。

   $('#search').autocomplete( {
       dataType: "json",
       parse: function(data) {
         var array = new Array();
         if (!data || data.length == 0) {
             // handle no data case specially
         }
         else {
            for (var i = 0; i < data.length; ++i) {
               var datum = data[i];
               array[array.length] = { 
                                       data: datum,
                                       value: data.FullName + ' ' + data.Address,
                                       result: data.DisplayName
                                     };
            }
         }
         return array;
       }
   });