2012-05-31 3 views
0

Я использую jquery combobox и полагаюсь на исходный код, предоставленный там. Мне нужны данные из удаленного источника, поэтому я подключил его с помощью ajax. Однако, поскольку AJAX является асинхронным вызовом, мне нужно обновить combobox с данными результатов поиска.Как вызвать поиск в jquery autocomplete combobox?

Как я могу вызвать поиск в выпадающем списке?

Отрывок:

/* In 
$.widget("ui.combobox", { 
      _create: function() { 
// input definition 
*/ 
.autocomplete({ 
    delay: 0, 
    minLength: 0, 
    source: function(request, response) { 
     // implements retrieving and filtering data from the select 
     var term = request.term; 

     if(term.length >= 2){ 
      var abbreviation = term.substring(0,2); 
      if(!(abbreviation in cache)){ 
       searchResultData = searchCities(abbreviation); 
       updateOptions(select, searchResultData); 
       cache[abbreviation] = 1; 
      } 
     } 

     // updates the search widget with options matching request.term 
     var responseData = filterOptionsForResponse(select, term); 

     response(responseData); 
    }, 

Остальной код, как это предусмотрено на сайте Jquery. Выше код работает абсолютно нормально, когда searchCities(abbreviation) возвращает локальный массив объектов.

  • searchCities(abbreviation): возвращает массив городов, соответствующих аббревиатуру
  • updateOptions(select, data): Обновление параметров в выберите выпадающий список с заданными данными
  • filterOptionsForResponse(select, term): обновляет combobx с вариантами соответствующих термина на основе Regex

Моя текущая версия поискаГорода с ajax:

function searchCities(abbreviation){ 
    if(!!abbreviation){ 
     $.ajax({ 
       url: "/wah/destinationsJson.action", 
       dataType: "json", 
       data: { 
        term: abbreviation 
       }, 
       type: "GET", 
       success: function(data){ 
        updateOptions($("#searchbox"), data.cities); 
        // $("#searchbox input").trigger('autocompleteselect', data.term); 
        // return data.cities; 
       } 
      }); 
    } 
} 

Вышеуказанный триггер не вызывает поиск! Может кто-нибудь, пожалуйста, объясните мне, как я могу вызвать поиск в этом поле со списком.

PS: Извините, что не предоставил jsfiddle/jsbin, так как я не мог заставить его отображать его.

ответ

0

Я, наконец, получил его на работу!

http://jsfiddle.net/SRekL/

Линия интерес:

ввода -> Источник -> Аякс -> Успех

success: function(data) { 
    optionData = $.map(data.geonames,function(item){ 
     return new Object({name: item.adminName1}); ; 
    }); 

    updateOptions(select, optionData); 
    response(filterOptionsForResponse(select, term)); 
    return; 
} 

Примечание:

  • Преобразование optionData в массив объектов, так как моя функция updateOptions(...) полагается на свойство «name».
  • updateOptions(select, optionData): Обновляет параметры этого выпадающий список с возвращенными данными
  • filterOptionsForResponse(select, term): Фильтры варианты, основанные на перспективе и подчеркивает согласованный текст.

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

Для демонстрации я использовал «http://ws.geonames.org/searchJSON» в качестве URL-адреса для вызова ajax в jsFiddle.

Кроме того, цепь нитей на SO доказала мне большую помощь:

  • Under the hood of jquery combobox - Одно наиболее ценный предмет, который объясняет колбы из выпадающего списка

Clue trail

Смежные вопросы