Не отображается сообщение о результатах в jQuery autocomplete

Я использую плагин автозаполнения jQuery, не UI автозаполнения. Я хотел бы сделать unclickable сообщение результатов не появляется всякий раз, когда они вводят что-то, что не имеет результатов автозаполнения. Как я могу это сделать?

9
autocomplete jquery

3 ответов

вот решение, которое требует нескольких небольших изменений в jquery.функция автозаполнения.js.

в jquery.функция автозаполнения.js:

отредактируйте функцию hideResultsNow (), чтобы она вызывала emptyData () первым делом

function hideResultsNow() {

    $('#emptyData').show();
    ...
}

измените привязку нажатия клавиши на поле ввода, чтобы скрыть #emptyData после каждого нажатия клавиши

$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {

    $('#emptyData').hide();
    ...
}

скрыть #emptyData после успешного выбора (прямо перед тем, как он вернет true)

function selectCurrent() {

    ...
    $('#emptyData').hide();
    return true;
}

тогда вам нужно добавить div с в этом же списке стиль emptyData #в HTML под полем ввода. Вот полный HTML для тестовой страницы, которую я использовал.

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />

  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
  $("#example").autocomplete(data);

  });
  </script>

</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")


  <div id='emptyData' class='ac_results' style='display: none; position: absolute; width: 151px; top: 20px; left: 91px;'>
    <ul style="max-height: 180px; overflow: auto;">
      <li id='noDataMsg' >No Results</li>
    </ul>
  </div>

</body>
</html>

позиция #emptyData была взята из позиции автозаполнения, и стиль CSS не совсем такой же, как для правильных ответов, но кроме этого я не думаю, что должно быть что-то, что потребует изменений. Надеюсь, это решит вашу проблему.

5

Я думаю, что вместо того, чтобы получать автозаполнение для выполнения ajax, вы могли бы сделать это сами, а затем передать результаты в автозаполнение, с помощью простого фильтра между этими двумя без результатов, поступающих с сервера. 

var input = $('input.autocomplete');
var inputLimit = 10;

// Create warning message and hide it
var warning = $('<p></p>').insertAfter(input).text('No results').addClass('warning').hide();

input.keyup(function(){
    warning.hide();

    $.get('url.php', {q: this.value, limit: inputLimit}, function(data){
        if(data){
            input.autocomplete(data);
        } else {
            warning.show();
        }
    }
});

конечно, предупреждение не появляется в самом поле автозаполнения, но это лучшее решение, которое я могу придумать без изменение источника плагина.

1

вот 1/2 решения; пусть ваш вызов AJAX вернет строку "нет результатов", когда у нее нет результатов.

чтобы сделать один результат не кликабельным, вероятно, требуется посмотреть на источник плагина.

0