Визуализация предложений автозаполнения в заранее заданном html-блоке с использованием jquery - PullRequest
Новая
       28

Визуализация предложений автозаполнения в заранее заданном html-блоке с использованием jquery

3 голосов
/ 30 июля 2011

У меня есть предопределенный HTML-код, скажем, 

<div id="wrapper">
   <div class="element"></div>
   <div class="element"></div>
   <div class="element"></div>
</div>

, и у меня есть поле ввода.У меня есть удаленный источник, который может вернуть мне результаты в формате jsonp.Я хочу использовать функцию автозаполнения jquery, но вместо результатов, отображаемых в раскрывающемся списке только что созданного div, я хочу заполнить их в моем существующем HTML, показанном выше.

Я много пытался его найти, но, похоже, я не нашел способа сделать это.Я довольно новичок в jquery, так что извините, если я упускаю что-то слишком очевидное.

Ответы [ 2 ]

4 голосов
/ 30 июля 2011

jQuery UI autocomplete имеет встроенную функциональность для настройки отображения результатов. Эта демонстрация показывает, как этого можно добиться, переопределяя метод _renderItem атрибута данных «автозаполнение» внутри кода автозаполнения пользовательского интерфейса jQuery.

HTML 

<label for="tags">Tags: </label><input id="tags" />
<div id="wrapper"></div>

JavaScript 

$('#tags').autocomplete({
    source: availableTags,
    search: function(event, ui) {
       // clear the existing result set
       $('#wrapper').empty();
    },
})
.data('autocomplete')._renderItem = function(ul, item) {
    return $('<div class="element"></div>')
        .data('item.autocomplete', item)
        .append('<a href="#">' + item.label+ '</a>')
        .appendTo($('#wrapper'));
    };

CSS & (чтобы скрыть обычный контейнер) 

.ui-autocomplete {
    display:none !important;
}

Вы можете настроить каждый элемент , изменив разметку внутриметод .append() в функции .data('autocomplete'), и вы можете захотеть взглянуть на другие автозаполнения Events , если хотите дополнительно манипулировать результатами поиска <div id="wrapper">, например, очистить список, если <input> приобретает фокус.

0 голосов
/ 30 июля 2011

Когда вы говорите, удаленный источник, вы имеете в виду базу данных или используете iframe?

Если это база данных, то вы извлекаете из некоторого внутреннего кода.Вот пример запроса ajax 

$.ajax({
    type: 'GET',
    url: 'path/to/server/code',
    dataType: 'jsonp',
    success: function(data) {
      //where you would work with the object
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    },
    jsonpCallback: function() {
        //your callback funciton
    }
});
...