Автозаполнение jQuery с изображениями

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

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

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

Может ли кто-нибудь объяснить мне, что означает приведенный ниже код в событии $(document).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];
  }
});

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

Ответы

Ответ 1

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

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

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

        width: 320,

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

        max: 4,

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

        highlight: false,

Выделите true/false

        scroll: true,

Полоса прокрутки aka drop-down типа списка или просто длинный 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];
        }

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

});

Закрывающие скобки: p

Ответ 2

Это о PLUGIN автозаполнения JQuery, нет такой опции, как formatItem и formatValue в фактическом автозаполнении JQuery.

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

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