2009-05-26 2 views
21

Я хочу реализовать функцию автозаполнения с изображениями на своем веб-сайте.jQuery autocomplete с изображениями

Я хотел бы использовать плагин автозаполнения jQuery.

Я просмотрел их пример кода.

Может кто-нибудь объяснить мне, что приведенный ниже код означает в $ (документ) .ready() событие:

$("#imageSearch").autocomplete("images.php", { 
    width: 320, 
    max: 4, 
    highlight: false, 
    scroll: true, 
    scrollHeight: 300, 
    formatItem: function(data, i, n, value) { 
    return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
    }, 
    formatResult: function(data, value) { 
    return value.split(".")[0]; 
    } 
}); 

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

ответ

21

Используйте это для справки: http://api.jqueryui.com/autocomplete/


$("#imageSearch").autocomplete("images.php", { 

Применить pluging автозаполнение всех полей #imageSearch. Первый параметр, я думаю, это страница, которая генерирует ответ на основе введенного (images.php);

 width: 320, 

Ширина выпадающего

 max: 4, 

Максимальные предложения

 highlight: false, 

Выделите истина/ложь

 scroll: true, 

прокрутки ака раскрывающийся вид списка, или просто длинный div под.

 scrollHeight: 300, 

Высота автоматического полного падения.

 formatItem: function(data, i, n, value) { 
      return "<img src='images/" + value + "'/> " + value.split(".")[0]; 
     }, 

Как форматировать ответ вернулся из images.php.

 formatResult: function(data, value) { 
      return value.split(".")[0]; 
     } 

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

}); 

Закрытие скобки: р

+0

Когда пользователь нажимает на любом из опции, я хочу, чтобы вызвать другую страницу, где я должен переопределить? – Shyju

+0

Поздний ответ, но вы можете найти ответ в вышеупомянутой документации - http://api.jqueryui.com/autocomplete/#event-select –

4

Это о PLUGIN Jquery автозаполнения, не существует такой вариант, как formatItem и formatValue в фактическом Jquery UI Autocomplete.

Я предлагаю людям прочитать это http://www.learningjquery.com/2010/06/autocomplete-migration-guide, в котором объясняется, как перенести из старой версии плагина в официальный виджет пользовательского интерфейса.

Чтобы вы автозаполнение работать с изображением в списке предлагает вам следует прочитать эту тему: http://forum.jquery.com/topic/using-html-in-autocomplete