jQuery: plugin Autocomplete cz. I

Autor: Arkadiusz Tobiasz 18 stycznia 2011

Dzisiaj chciałbym przedstawić kolejny ciekawy plugin do jQuery jakim jest Autocomplete. Pewnie nieraz zastanawiałeś się jak zrobić podpowiedzi wyświetlane podczas wpisywania słowa w wyszukiwarce Google czy na Wikipedii. Osiągnąć to można m.in. korzystając z wspomnianego pluginu Autocomplete.

Zanim rozpoczniemy pracę musimy ściągnąć bibliotekę jQuery, o ile z niej jeszcze nie korzystasz. Najnowszą wersję możesz pobrać stąd. Następnie musimy pobrać plugin Autocomplete, najlepiej ze strony domowej projektu, którą znajdziesz tutaj.

To do dzieła! Rozpoczynamy od umieszczenia w sekcji <head>…</head> odwołań do ściągniętych plików:

1
2
3
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<link href="jquery.autocomplete.css" media="screen" rel="stylesheet" type="text/css">

Dzięki pierwszej linijce możemy korzystać z biblioteki jQuery (plik ten można również ściągnąć i umieścić lokalnie na swojej stronie, np. w katalogu js/). Sama biblioteka nam jednak nie wystarczy, bowiem w kolejnej linijce ładujemy odpowiedni plugin Autocomplete wykorzystujący załadowaną wcześniej bibliotekę (plik ten również trzeba ściągnąć i umieścić na swoim serwerze). Polecam, aby te pliki umieścić na swoim serwerze i tak się do nich odwoływać, gdyż wtedy możecie być pewni, że z czasem nie znikną. Ostatnia linijka to odwołanie do stylu.

Nie pozostaje nic innego jak skorzystać z pluginu, w sekcji head dodatkowo umieszczamy:

1
2
3
4
<script type="text/javascript">
var data = "Katowice Kraków Toruń Warszawa Łódź".split(" ");
$("input[name='city']").autocomplete(data);
</script>

W taki oto sposób input o nazwie city będzie wyświetlał sugestie zadeklarowanych miast a tablicy data. Po wpisaniu litery „K” dostaniemy sugestie dwóch miast Krakowa i Katowic.

Oczywiście możemy również deklarować dodatkowe opcje dla tego pluginu. Jeżeli chcemy, aby nasz input został wypełniony pierwszą pasującą wartością z tablicy, to ustawimy opcję autoFill, a nasz kod będzie wyglądał tak:

1
2
3
4
5
6
<script type="text/javascript">
var data = "Katowice Kraków Toruń Warszawa Łódź".split(" ");
$("input[name='city']").autocomplete(data, {
     autoFill: true
});
</script>

Jeżeli nie chcemy aktywować tej możliwości, to ustawiamy ten parametr na false. Kolejną przydatną opcją jest delay, która określa czas w milisekundach po upływie którego podpowiedzi zostaną wyświetlone (czas jest liczony od wpisania znaku w pole input). Domyślne wartości to 10 ms w przypadku danych lokalnych oraz 400 ms w przypadku danych wczytywanych np. z bazy danych. Po ustawieniu czasu na 20 ms, nasz kod będzie wyglądał tak:

1
2
3
4
5
6
7
<script type="text/javascript">
var data = "Katowice Kraków Toruń Warszawa Łódź".split(" ");
$("input[name='city']").autocomplete(data, {
     autoFill: true,
     delay: 20
});
</script>

Możemy również określić minimalną liczbę znaków, po których wpisaniu zostanie aktywowany dopiero plugin. Efekt ten osiągamy ustawiając opcję minChars, w naszym przypadku będą to 3 znaki:

1
2
3
4
5
6
7
8
<script type="text/javascript">
var data = "Katowice Kraków Toruń Warszawa Łódź".split(" ");
$("input[name='city']").autocomplete(data, {
     autoFill: true,
     delay: 20,
     minChars: 3
});
</script>

Jeżeli chcemy narzucić, aby wpisywana wartość pasowała do jednej ze znajdujących się w naszym źródle danych, to skorzystamy z opcji mustMatch w taki sposób:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
var data = "Katowice Kraków Toruń Warszawa Łódź".split(" ");
$("input[name='city']").autocomplete(data, {
     autoFill: true,
     delay: 20,
     minChars: 3,
     mustMatch: true
});
</script>

Jeżeli chcemy określić szerokość listy z podpowiedziami to skorzystamy z parametru width, w którym podajemy szerokość w pikselach. Domyślnie ta wartość przyjmuje szerokość elementu, do którego została przypisana, w tym przypadku pola input.

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
var data = "Katowice Kraków Toruń Warszawa Łódź".split(" ");
$("input[name='city']").autocomplete(data, {
     autoFill: true,
     delay: 20,
     minChars: 3,
     mustMatch: true,
     width: 300
});
</script>

Ponadto możemy skorzystać z innych opcji takich jak:

cacheLength – parametr, który określa liczbę wyników jaka ma zostać zapisana w pamięci podręcznej (dotyczy źródła danych pochodzących np. z bazd danych), domyślna wartość to 10,
extraParams – opcja przydatna jeżeli musimy przekazać dodatkowe parametry do skryptu, z którego będziemy korzystać przy pobieraniu danych z zewnętrznego źródła,
formatItem funkcja pozwalająca określić w jaki sposób ma być sformatowana lista z podpowiedziami,
formatMatch – funkcja pozwalająca określić w jaki sposób mają być sformatowane dane pasujące do bieżącej wartości inputa,
formatResult – funkcja pozwalająca określić w jaki sposób ma być sformatowany rezultat naszego zapytania,
highlight – domyślnie powoduje pogrubienie frazy pasującej do wpisywanego ciągu, można w tym miejscu zdefiniować własną funkcję,
max – określa maksymalną liczę elementów wyświetlanych jako podpowiedzi, domyślnie 10.
multiple – dzięki tej opcji możemy wprowadzić do danego pola więcej niż jedną wartość, domyślnie ustawiona na false,
multipleSeparator – znak, który zostanie wstawiony między wiele wartości, domyślnie jest to przecinek,
scroll – aktywuje pasek przewijania, kiedy wyników jest więcej i nie mieszczą się w zadeklarowanej wysokości, wartość domyślna to true,
scrollHeight –wysokość listy z podpowiedziami, domyślnie 180 pikseli,
selectFirst – domyślnie powoduje wybranie pierwszej pasującej podpowiedzi, która po wcisnięciu tabulacji jest wstawiana do inputa, domyślnie true.

W kolejnym wpisie postaram się pokazać w jaki sposób pobierać dane z bazy danych i wyświetlać je z wykorzystaniem pluginu AutoComplete jako podpowiedzi. Demo możecie zobaczyć na stronie autora.

Jeden komentarz

  1. […] poprzednim wpisie opisałem podstawowe możliwości pluginu jQuery jakim jest Autocomplete. W tym wpisie postaram […]

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]