Auto Complete Input Form pure jQuery UI

http://blog.kangrian.com

by Rian .N Herdian

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Kota : <input id="kota-indonesia"></input>

CSS

.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 300px;
}

JavaScript

$(function() {
var availableTags = [
"Banda Aceh",
"Bireun",
"Blang Kejeren",
"Blang Pidie",
"Idi Rayeuk",
"Jantho",
"Kuala Simpang",
"Kutacane",
"Krueng Sabee",
"Langsa",
"Lhoksumawe",
"Lhoksukon",
"Meulaboh",
"Meureudu",
"Sabang",
"Sigli",
"Simpang Tiga Redelon",
"Sinabang",
"Singkil",
"Subulussalam",
"Suka Makmur",
"Takengon",
"Tapak Tuan",
"Calang",
"Kabupaten Bireun",
"Kabupaten Gayo Lues",
"Kabupaten Aceh Barat Daya",
"Kabupaten Aceh Timur",
"Kabupaten Aceh Besar",
"Kabupaten Aceh Taminang",
"Kabupaten Aceh Tenggara",
"Kabupaten Aceh Jaya",
"Kabupaten Aceh Utara",
"Kabupaten Aceh Barat",
"Kabupaten Pidie Jaya",
"Kabupaten Pidie",
"Kabupaten Bener Mariah",
"Kabupaten Simeulue",
"Kabupaten Aceh Singkil",
"Kabupaten Nagan Raya",
"Kabupaten Aceh Tengah",
"Kabupaten Aceh Selatan",
"Balige",
"Binjai",
"Dolok Sanggul",
"Gunung Sitoli",
"Gunung Tua",
"Kabanjahe",
"Kisaran",
"Limapuluh",
"Lubuk Pakam",
"Medan",
"Padang Sidempuan",
"Pangururan",
"Panyambungan",
"Pamatangsiantar",
"Rantau Prapat",
"Salak",
"Sei Rampah",
"Sibolga",
"Sibuhuan",
"Sidikalang",
"Sipirok",
"Stabat",
"Tanjung Balai Asahan",
"Taruntung",
"Tebing Tinggi",
"Teluk Dalam",
"Pangkalan Brandan",
"Laguboti",
"Belawan",
"Siborong Borong",
"Tanjung Morawa",
"Kabupaten Toba Samosir",
"Kabupaten Humbang Hasudutan",
"Kabupaten Nias",
"Kabupaten Padang Lawas Utara",
"Kabupaten Karo",
"Kabupaten Asahan",
"Kabupaten Batubara",
"Kabupaten Deli Serdang",
"Kabupaten Samosir",
"Kabupaten Mandailing Natal",
"Kabupaten Simalungan",
"Kabupaten Labuhan Batu",
"Kabupaten Pakpak Bharat",
"Kabupaten Serdang Badagai",
"Kabupaten Tapanuli Tengah",
"Kabupaten Padang Lawas",
"Kabupaten Dairi",
"Kabupaten Tapanuli Selatan",
"Kabupaten Langkat",
"Kabupaten Tapanuli Utara",
"Kabupaten Nias Selatan",
"Bagan Siapi api",
"Bangkinang",
"Bengkalis",
"Dumai",
"Pangkalan Kerinci",
"Pasir Pangaraian",
"Pekanbaru",
"Rengat",
"Siak Indrapura",
"Teluk Kuantan",
"Tembilahan",
"Minas",
"Rumbai",
"Marpotyan",
"Ujung Batu",
"Kabupaten...