检测没有结果的jQuery用户界面自动完成 [英] Detecting no results on jQuery UI autocomplete

问题描述

在你点我到他们，是的，我审阅了关于这一主题的半打的职位，但我仍然受到阻碍，为什么这是行不通的。

Before you point me to them, yes, I have reviewed the half dozen posts on this topic, but I am still stymied as to why this doesn't work.

我的目标是自动完成的产量时，发现0的结果。这里的code：

My goal is to detect when the autocomplete yields 0 results. Here's the code:

 $.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不引用结果的数量永远不会触发）。开事件处理程序示出的结果的正确数目（当有结果），并且搜索和关闭的事件处理程序报告结果的大小，始终是一个步骤的后面。

The search itself works fine, I can get results to appear without a problem. As I understand it, I should be able to intercept the results with the autocomplete("result") handler. In this case, it never fires at all. (Even a generic alert or console.log that doesn't reference the number of results never fires). The open event handler shows the correct number of results (when there are results), and the search and close event handlers report a result size that is always one step behind.

我觉得我失去了一些东西明显，闪耀着这里，但我只是没有看到它。

I feel like I'm missing something obvious and glaring here but I just don't see it.

推荐答案

jQueryUI的1.9拥有得天独厚的自动完成构件与响应事件，我们可以利用检测如果没有结果返回：

jQueryUI 1.9

jQueryUI 1.9 has blessed the autocomplete widget with the response event, which we can leverage to detect if no results were returned:

触发搜索完成后，在菜单显示之前。有用的本地操作建议数据，在不需要自定义源的选择回调。搜索完成后，即使菜单将不会显示，因为没有结果或自动完成禁用此事件始终触发。

Triggered after a search completes, before the menu is shown. Useful for local manipulation of suggestion data, where a custom source option callback is not required. This event is always triggered when a search completes, even if the menu will not be shown because there are no results or the Autocomplete is disabled.

因此​​，考虑到这一点，黑客入侵我们已经做jQueryUI的1.8替换为：

So, with that in mind, the hacking we had to do in jQueryUI 1.8 is replaced with:

$(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的API做到这一点，但是，你可以用自己的替换 autocomplete._response 函数，然后调用默认jQueryUI的功能（更新，以延长自动完成的原型）对象的：

I couldn't find a straightforward way to do this with the jQueryUI API, however, you could replace the autocomplete._response function with your own, and then call the default jQueryUI function (updated to extend the autocomplete's prototype object):

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

，然后绑定一个事件处理程序的 autocompletesearchcomplete 事件（内容是搜索，一个数组的结果）：

And then bind an event handler to the autocompletesearchcomplete event (contents is the result of the search, an array):

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

什么是怎么回事是要保存自动完成的响应函数的变量（ __响应），然后使用<一个href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/function/apply"><$c$c>apply再次调用它。我无法想象这个方法，因为你调用默认的方法的任何不良影响。因为我们正在修改的对象的原型，这将适用于所有自动完成的部件。

What's going on here is that you're saving autocomplete's response function to a variable (__response) and then using apply to call it again. I can't imagine any ill-effects from this method since you're calling the default method. Since we're modifying the object's prototype, this will work for all autocomplete widgets.

这里的工作示例： http://jsfiddle.net/andrewwhitaker/VEhyV/

我的示例使用本地阵列作为数据源，但我不认为应该的问题。

My example uses a local array as a data source, but I don't think that should matter.

更新：您也可以包装新的功能在其自身的小部件，延长默认的自动完成功能：

Update: You could also wrap the new functionality in its own widget, extending the default autocomplete functionality:

$.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/

由于这个问题/答案已经得到了一定的关注，我想我会更新这个答案用另一种方式来做到这一点。当你只有一个自动完成在网页上的小部件这种方法是最有用的。这样做可以应用到使用远程或本地源的自动完成构件：

Since this question/answer has gotten some attention, I thought I'd update this answer with yet another way to accomplish this. This method is most useful when you have only one autocomplete widget on the page. This way of doing it can be applied to an autocomplete widget that uses a remote or local source:

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);
    }
});

在如果是要在其中放置您的定制逻辑，当没有检测到的结果来执行。

Inside the if is where you would place your custom logic to execute when no results are detected.

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

如果您使用的是远程数据源，说是这样的：

If you are using a remote data source, say something like this:

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

然后，你需要改变你的code，让你做AJAX调用自己，并可以检测到0结果回来：

Then you'll need to change your code so that you make the AJAX call yourself and can detect when 0 results come back:

$("#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([]);
            }
        });
    }
});

这篇关于检测没有结果的jQuery用户界面自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！