Autocomplit Search

by AJIEKCEU

HTML

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<div id="tabs">
<div id="tabs-1">
Введите название страны: <input id="country" />
</div>
<div id="tabs-2">
<p>Виджет ниже будет производить поиск по удаленному источнику данных, который содержит список всех городов России (1107 городов).</p>
<p style="font-size:1.2em">Поиск начнет выполнение, когда длина ввода превысит 2 символа.</p>
Введите название города: <input id="city" />
</div>
</div>
</body>
</html>

CSS

#city.ui-autocomplete-loading {background: url("ajaxload.gif") right center no-repeat;}

#city{width:400px;}
#tabs-2 p,#tabs-3 p
{
font-size:1.2em;
}
.ui-autocomplete{
border-radius: 0px;
border: 1px solid #d6d4c3;
background: #fff;
list-style: none;
padding-left: 10px;
    display:table;
}
.ui-state-hover{
border:none;
    background:cdcdcd!important;
}

JavaScript

$(document).ready(function() {
       var country=["Австралия",
       "Австрия","Азербайджан", "Аргентина","Афганистан", "Бангладеш","Беларусь","Бразилия","Великобритания ",
       "Вьетнам","Германия","Греция","Грузия","Дания","Египет","Израиль","Ирак","Иран","Испания ","Италия",
       "Канада","КНР","Эстония","ЮАР","Япония"];
   $("#tabs").tabs();
//Код первой вкладки (стандартное использование)
   $("#country").autocomplete({source:country, minLength:2});
//Код второй вкладки (удаленная база данных)
   $("#city").autocomplete({source: "jsonsuggest.php", minLength:2});
//Код третьей вкладки (управление извлечеными данными)

});