Autouzupełnianie jQuery ze zdjęciami

Question

Chcę zaimplementować funkcję autouzupełniania z obrazami na mojej stronie internetowej.

Chciałbym użyć wtyczki autocomplete jQuery.

Zerknąłem na ich przykładowy kod.

Czy ktoś może mi wyjaśnić co oznacza poniższy kod w $ (document) .ready() zdarzenie:

$("#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]; 
    } 
}); 

Moim ostatecznym wymogiem jest, kiedy wpisać kilka liter w polu tekstowym, chcę opcji, aby pochodzą z obrazem z nim powiązanym.

Answer 1

Użyj tego dla odniesienia: http://api.jqueryui.com/autocomplete/

---

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

Zastosuj pluging autouzupełniania do wszystkich dziedzin #imageSearch. Pierwszy parametr Domyślam się, że strona generuje odpowiedź na podstawie tego, co zostało wprowadzone (images.php);

 width: 320, 

Szerokość rozwijanej

 max: 4, 

Maksymalnie sugestie

 highlight: false, 

Highlight prawda/fałsz

 scroll: true, 

Pasek przewijania aka rozwijanej rodzaju listy, lub tylko długi div pod.

 scrollHeight: 300, 

Wysokość automatycznego uzupełniania rozwijanego.

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

Jak sformatować odpowiedzią zwrócona z images.php.

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

Jak zwrócić wartość, jeśli użytkownik wybierze jedną z opcji.

}); 

zamykające nawiasy: p

Answer 2

Chodzi o jQuery plugin autouzupełniania, nie ma takiej opcji jak formatItem i formatValue w rzeczywistej jQuery UI autouzupełniania.

Proponuję, aby przeczytać ten numer http://www.learningjquery.com/2010/06/autocomplete-migration-guide, który wyjaśnia, w jaki sposób przeprowadzić migrację ze starej wersji wtyczki do oficjalnego widgetu interfejsu użytkownika.

Aby dostać się uzupełni pracy z obrazem na liście proponuję powinieneś przeczytać ten wątek: http://forum.jquery.com/topic/using-html-in-autocomplete