Не отображается сообщение о результатах автозаполнения jquery - PullRequest
Новая
       3

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

9 голосов
/ 12 августа 2010

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

Ответы [ 3 ]

5 голосов
/ 20 августа 2010

Вот решение, которое требует нескольких небольших правок в jquery.autocomplete.js.

В jquery.autocomplete.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 не совсем такой же, как для правильных ответов, но отличается отчто я не думаю, что должно быть что-то, что потребует изменений.Надеюсь, что это решит вашу проблему.

1 голос
/ 21 августа 2010

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

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

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

0 голосов
/ 15 августа 2010

Здесь 1/2 решения;пусть ваш AJAX-вызов вернет строку «Нет результатов», если она не принесла результатов.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...