Обнаружение отсутствия результатов при автозаполнении пользовательского интерфейса jQuery

Кажется, что все игнорируют простой, встроенный способ: используйте сообщения: 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 года еще не задокументировано в API.

Если вы используете удаленный источник данных (например, базу данных MySQL, PHP или что-то еще на стороне сервера), есть пару других более чистых способов справиться с ситуацией, когда нет данных для возврата клиенту (без необходимости изменения каких-либо хаков или изменения кода кода кода ядра).

Я использую PHP и MySQL в качестве удаленного источника данных и JSON для передачи информации между ними. В моем случае я, казалось, получал ошибки исключения jQuery, если запрос JSON не получил какого-либо ответа с сервера, поэтому мне было проще просто вернуть пустой ответ JSON с серверной стороны, когда нет данных, а затем обрабатывать клиент ответ оттуда:

if (preg_match("/^[a-zA-Z0-9_]*$/", $_GET['callback'])) {//sanitize callback name
    $callback = $_GET['callback'];
} else { die(); }

die($callback . "([])");

Другим способом было бы вернуть флаг в ответе от сервера, чтобы указать, что нет соответствующих данных и выполнять действия клиентской стороны на основе присутствия (и/или значения) флага в ответе. В этом случае ответ сервера будет примерно таким:

die($callback . "([{'nodata':true}])");

Затем на основе этого флага действия могут выполняться на стороне клиента:

$.getJSON('response.php?callback=?', request, function (response) {
    if (typeof response[0].nodata !== 'undefined' && response[0].nodata === true) {
        alert('No data to display!');
    } else {
        //Do whatever needs to be done in the event that there is actually data to display.
    }
});

После инициализации вашего элемента автозаполнения установите параметр сообщений, если вы хотите использовать интервалы по умолчанию для отображения сообщения:

$(<yourselector>).autocomplete('option', 'messages', {
    noResults: 'myKewlMessage',
    results: function( amount ) {
        return amount + ( amount > 1 ? " results were" : " result was" ) + " found.";
    }
});

ПРИМЕЧАНИЕ. Это экспериментальный API (не документированный). Разработчики jQuery UI по-прежнему изучают полное решение для струнных манипуляций и интернационализации.

The easiest straight forward way to do it.

$("#search-box").autocomplete({
                    minLength: 2,
                    source:function (request, response) {
                        $.ajax({
                            url: urlPref + "/Api/SearchItems",
                            data: {
                                term: request.term
                            },
                            success: function (data) {
                                if (data.length == 0) {
                                    data.push({
                                        Id: 0,
                                        Title: "No results found"
                                    });
                                }
                                response(data);
                            }
                            });
                        },

Я не понимаю, почему параметр source с пользовательским обратным вызовом недостаточно. Предполагая, что мы используем службу JSON (P), просто помните следующее:

Серверная сторона script должна выдавать действительный JSON, даже если результаты не найдены - и [] действителен JSON.

Документация для параметра source предполагает, что:

Ответный ответ, который ожидает один аргумент: данные для предложить пользователю. Эти данные должны быть отфильтрованы на основе предоставленный термин, и может быть в любом из форматов, описанных выше для простые локальные данные. Это важно при предоставлении настраиваемого источника обратный вызов для обработки ошибок во время запроса. Вы всегда должны звонить ответный ответ, даже если вы столкнулись с ошибкой. Это обеспечивает что виджет всегда имеет правильное состояние.

Сохраняя вышеуказанные две точки, должно быть достаточно:

$("#autocomplete").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://example.com/service.json",
            data: {
                q: this.term
            },
            success: function (data, textStatus, jqXHR) {
                // data must be an array containing 0 or more items
                console.log("[SUCCESS] " + data.length + " item(s)");
                response(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // triggered when AJAX failed because of, for example, malformed JSON
                console.log("[ERROR] n/a item(s)");
                response([]);
            }
        });
    }
});

После нескольких часов игры я наконец нашел трюк, чтобы отобразить No match found в автозапуске jQuery. Посмотрите на приведенный выше код и просто добавьте div, в моем случае #ulNoMatch и его стиль установлен на displap:none. В методе успешного выполнения обратного вызова проверьте, имеет ли возвращенный массив length == 0. Если это ты туда, ты сделал свой день!:)

<pre><div class="ui-widget1" style="width: auto;">
    <asp:TextBox ID="txtSearch" class="tb" runat="server" Width="150px">
    </asp:TextBox>
    <ul id="ulNoMatch" class="ui-autocomplete ui-menu ui-widget1 ui-widget1-content ui-corner-all"
        role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 16;
        display: none; width: 150px;">
        <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">No Matches
            Found</a></li>
    </ul>
    </div><pre>
<b>
<b>

Enter code here

<script>
    $(function () {
        $("input[id$='txtSearch']").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "splah.aspx/GetByName",
                    data: "{ 'strName': '" + request.term.trim() + "' }",
                    dataType: "json",
                    type: "POST",
                    //cacheLength: 1,
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) {
                        return data; },
                    success: function (data) {
                        var found = $.map(data.d, function (item) {
                            return {
                                value: item.Name,
                                id: item.id
                            }
                         });

                         if (found.length == 0)
                         {
                             $("#ulNoMatch").show();
                         }
                         else
                         {
                             $("#ulNoMatch").hide();
                         }
                         response(found);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            select: function (event, ui) {
                $("input[id$='txtSearch']").val(ui.item.label);
                $("input[id$='txtID']").val(ui.item.id);
                return false;
            },
            minLength: 1
        });
    });
</script>

function SearchText() {
 $(".autosuggest").autocomplete({
   source: function (request, response) {
    $.ajax({
     type: "POST",
     contentType: "application/json; charset=utf-8",
      url: "Default.aspx/GetAutoCompleteData",
      data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
        dataType: "json",
        success: function (data.d) {
        if ((data.d).length == 0) {
         alert("no result found");
          }
           response(data.d);
         },
         error: function (result) {
              alert("Error");
         }
         });
        }
     });
  }