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

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

Я использую 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.
    }
});

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

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

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

Примечание: Это экспериментальный API (не документально). разработчики jQuery UI все еще исследуют полное решение для обработки строк и интернационализации.

после нескольких часов игры я, наконец, нашел трюк для отображения 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>

Я не понимаю, почему source параметр с пользовательским обратным вызовом не

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

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