Autocomplete jQuery segítségével (autocomplete plugin)

---

Ebben a tutorialban azt írom le, hogyan hozhatunk létre javascriptes autocomplete szövegmezőt.
Olyan, mint amit a google keresőjénél láthatunk.


Demó
Először is szükségünk lesz a jQuery-ra.
Innen tölthető le: www.jquery.com

<script src="jquery-mostani-verzio.js"></script>

Ehhez kell még a jQuery-hez létrehozott autocomplete plugin.
Innen tölthető le: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete

A letöltött fájlban található jquery.autocomplete.css és a jquery.autocomplete.pack.js fog kelleni.

<script src="jquery.autocomplete.pack.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />

A css-ben természetesen ha nem tetszik, akkor a szövegek színét hátterét keretét stb. át lehet állítani...

Létre kell hozni egy szövegmezőt (text típusú input vagy textarea).

Kulcsszavak: <input type="text" id="kulcsszo">

Ez után jQuery segítségével "kiválasztjuk" a szövegmezőt és a (kibővített) jQuery autocomplete függvényét végrehajtjuk.

<script>
// soronként egy kifejezés a fájlban:
var data = "autocomplete.php";

// vagy a kifejezések egy tömbben:
data = ["html", "javascript", "php", "java"];

var options = {
	matchContains: true, // keresés bárhol a listában szereplő kifejezésekben
	minChars: 1 // minimális begépelendő karakter ahhoz, hogy mutassa a lehetőségeket
};

// ez ugyan az, mint a $.ready vagy a $(document).ready
$(function(){
	$("#kulcsszo").autocomplete(data, options);
});
</script>

Abban az esetben, ha egy fájlt adunk meg a data változóban, akkor annak a fájlnak (például egy php scriptnek) a q és a limit nevű GET paraméter alapján kell megadnia az egyes sorokban szereplő kifejezéseket.

Például, begépeljük, hogy "javascr" akkor egy ilyen kérést küld:
autocomplete.php?q=javascr&limit=10

Lehetőség van még egy szövegmezőbe több kulcsszót bevinni (pl. kulcsszavak felsorolása szóközzel):

Ekkor az options változó így néz(het) ki:

var options = {
	... ,
	multiple: true,
	multipleSeparator: " "
};

Így ha beírtunk egy kulcsszót és írunk még egy szóközt, akkor újra megjelenik a kulcsszavak felsorolása a begépelt kifejezés alapján.

Összes beállítási lehetőség leírva a jQuery.com oldalon