检测jQuery UI自动完成没有结果

Question

在你指出我之前,是的,我已经回顾了关于这个主题的六个帖子,但我仍然因为这不起作用而受到阻碍.

我的目标是检测自动完成何时产生0结果.这是代码:

 $.ajax({
   url:'sample_list.foo2',
   type: 'get',
   success: function(data, textStatus, XMLHttpRequest) {
      var suggestions=data.split(",");

  $("#entitySearch").autocomplete({ 
    source: suggestions,
    minLength: 3,
    select: function(e, ui) {  
     entityAdd(ui.item.value);
     },
    open: function(e, ui) { 
     console.log($(".ui-autocomplete li").size());
     },
    search: function(e,ui) {
     console.log("search returned: " + $(".ui-autocomplete li").size());

    },
    close: function(e,ui) {  
     console.log("on close" +  $(".ui-autocomplete li").size());    
     $("#entitySearch").val("");
    }
   }); 

  $("#entitySearch").autocomplete("result", function(event, data) {

   if (!data) { alert('nothing found!'); }

  })
 }
}); 

搜索本身工作正常,我可以得到没有问题的结果.据我了解,我应该能够使用自动完成("结果")处理程序拦截结果.在这种情况下,它根本不会发射.(即使是不引用结果数量的通用警报或console.log也不会触发).open事件处理程序显示正确的结果数(当有结果时),search和close事件处理程序报告结果总是落后一步.

我觉得我错过了一些显而易见的东西,但我只是看不到它.

Answer 1

jQueryUI 1.9

jQueryUI 1.9使用response事件祝福自动完成小部件,我们可以利用它来检测是否没有返回任何结果:

搜索完成后,在显示菜单之前触发.对于建议数据的本地操作很有用,其中不需要自定义源选项回调.搜索完成时始终会触发此事件,即使由于没有结果或禁用自动填充功能而无法显示菜单也是如此.

因此,考虑到这一点,我们在jQueryUI 1.8中所做的黑客攻击被替换为:

$(function() {
    $("input").autocomplete({
        source: /* */,
        response: function(event, ui) {
            // ui.content is the array that's about to be sent to the response callback.
            if (ui.content.length === 0) {
                $("#empty-message").text("No results found");
            } else {
                $("#empty-message").empty();
            }
        }
    });
});?

示例: http ://jsfiddle.net/andrewwhitaker/x5q6Q/

jQueryUI 1.8

我找不到使用jQueryUI API执行此操作的简单方法,但是,您可以autocomplete._response使用自己的函数替换该函数,然后调用默认的jQueryUI函数(更新以扩展自动完成的prototype对象):

var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
    __response.apply(this, [content]);
    this.element.trigger("autocompletesearchcomplete", [content]);
};

然后将事件处理程序绑定到autocompletesearchcomplete事件(内容是搜索的结果,一个数组):

$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});

这里发生的是你将自动完成response功能保存到变量(__response)然后再用apply它来调用它.因为你正在调用默认方法,所以我无法想象这种方法有任何不良影响.由于我们正在修改对象的原型,因此这适用于所有自动完成小部件.

这是一个有效的例子:http://jsfiddle.net/andrewwhitaker/VEhyV/

我的示例使用本地数组作为数据源,但我认为这不重要.

更新:您还可以将新功能包装在自己的小部件中,从而扩展默认的自动完成功能:

$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {

  _response: function(contents){
      $.ui.autocomplete.prototype._response.apply(this, arguments);
      $(this.element).trigger("autocompletesearchcomplete", [contents]);
  }
}));

将您的通话更改.autocomplete({...});为:

$("input").customautocomplete({..});

然后再绑定到自定义autocompletesearchcomplete事件:

$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});

在这里查看示例:http://jsfiddle.net/andrewwhitaker/VBTGJ/

由于这个问题/答案得到了一些关注,我想我会用另一种方法来更新这个答案.当您在页面上只有一个自动完成小部件时,此方法最有用.这种方式可以应用于使用远程或本地源的自动完成小部件:

var src = [...];

$("#auto").autocomplete({
    source: function (request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);

        if (!results.length) {
            $("#no-results").text("No results found!");
        } else {
            $("#no-results").empty();
        }

        response(results);
    }
});

在if没有检测到结果的情况下,您可以在其中放置自定义逻辑.

示例: http ://jsfiddle.net/qz29K/

如果您使用的是远程数据源,请说出以下内容:

$("#auto").autocomplete({
    source: "my_remote_src"
});

然后,您需要更改代码,以便自己进行AJAX调用,并检测0结果何时返回:

$("#auto").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "my_remote_src", 
            data: request,
            success: function (data) {
                response(data);
                if (data.length === 0) {
                    // Do logic for empty result.
                }
            },
            error: function () {
                response([]);
            }
        });
    }
});

Answer 2

每个人似乎都忽略了简单的内置方法：使用messages：noResults事件。

$('#field_name').autocomplete({
  source: $('#field_name').data('autocomplete-source'),
  messages: {
    noResults: function(count) {
      console.log("There were no matches.")
    },
    results: function(count) {
      console.log("There were " + count + " matches")
    }
  }
})

此功能是jQuery 1.9中的一项实验功能（此处所述）。截至2017年7月，该API尚未记录在文档中。