JQuery UI Функция автозаполнения функции автозаполнения не имеет соответствия или автозаполнения

Question

Я использую последний виджет автозаполнения, который является частью последнего пользовательского интерфейса JQuery. Две вещи, которые мне нужны, - это автозаполнение, чтобы заполнить текстовое поле по мере ввода и способ сопоставления значений, введенных со значениями в БД. Кто-нибудь знает, как это сделать с существующим автозаполнением? Спасибо

Answer 1

Отказ от ответственности: Это будет работать только в современных браузерах с поддержкой input.setSelectionRange. Если вы хотите решение для старых браузеров, вам нужно будет найти кросс-браузерное решение.

Во всяком случае, вот как я бы подойти к этому:

$(document).ready(function() { 
    $("#auto").autocomplete({ 
     source: function(request, response) { 
      /* autofill: */ 

      /* If using AJAX, place your AJAX request here */ 
      var results = $.ui.autocomplete.filter(src, request.term) 
       , el = this.element[0]; 

      if (results.length) { 
       el.value = results[0]; 

       /* This will not work < IE9 */ 
       el.setSelectionRange(request.term.length, el.value.length); 
      } 

      response(results); 
     }, 
     change: function (event, ui) { 
      /* mustmatch: */ 
      if (!ui.item) { 
       this.value = ''; 
      } 
     } 
    }); 
}); 

Пример:http://jsfiddle.net/SgxyT/

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

С другой стороны, autofill потребует от вас использовать функцию для автозаполнения source, определить результаты и задать выбор на входе.

Answer 2

Вы должны написать серверный скрипт, который строит правильный SQL-запрос и возвращает согласованные строки в формате JSON, совместимый с спецификацией автозаполнения.

Answer 3

Вы видите эту ссылку http://jqueryui.com/demos/autocomplete/#remote-jsonp?

В качестве источника данных вы можете указать серверную страницу. Он внутренне использует jquery ajax.

$("#txtSearchKey").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: "getcityname.aspx?term=" + $("#txtSearchKey").val(), 
         dataType: "json", 
         success: function (data) { 
          response($.map(data, function (item) { 
           return { label: item.CityName, value: item.CityId } 
          })); 
         } 
        }); 
       } 
    }); 

Вы должны иметь страницу сервера (в данном примере, getcityname.aspx), который считывает значение строки запроса и выполнить вызов к базе данных, чтобы получить название города начинается с того, что вы ввели в текстовом поле с идентификатором "txtSearchKey". Вы можете вернуть ответ с помощью response.write.