Автокомплит на сайте
Добрый день. Подскажите кто знает каким образом можно сделать автокомплит на сайте? Чтобы реализовать в поиске автокомплит города или аэропорта, используется запрос следующего вида:
http://autocomplete.travelpayouts.com/jravia?locale=ru&with_countries=false&q=Мос&callback=function
где q — основной параметр, задается в виде текста; locale — язык вывода; with_countries — используется, если автокомплит создается для страны (false — ответ не содержит информацию о стране, true — ответ содержит информацию о стране); callback — название функции, в которой возвращается ответ.
Пример ответа:
[
{
"_id":"4eda5f858792904be4001433",
"coordinates":{
"lon":37.617633,
"lat":55.755786
},
"city_fullname":"Москва, Россия",
"city_code":"MOW",
"name":null,
"_type":"city",
"_score":67.74186,
"city_name":"Москва",
"title":"Москва",
"country_code":"RU",
"country_name":"Россия",
"code":"MOW"
},
{
"_id":"4eda61628792904be4003b20",
"coordinates":{
"lon":43.149445,
"lat":36.3075
},
"city_fullname":"Мосул, Ирак",
"city_code":"OSM",
"name":"Мосул",
"_type":"airport",
"_score":26.681381,
"city_name":"Мосул",
"title":"Мосул",
"country_code":"IQ",
"country_name":"Ирак",
"code":"OSM"
}]вот пример кода как я пытаюсь сделать:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<script>
$(document).ready(function(){
$( "#test" ).autocomplete({
source: function(request, response){
$.ajax({
url: "http://autocomplete.travelpayouts.com/jravia?locale=ru&with_countries=false&callback=function",
dataType: "jsonp",
data:{
q: request.term
},
success: function(data){
response($.map(data, function(item){
alert(data);
}));
}
});
},
minLength: 2
});
});
</script>
<input id="test">
</body>
</html>Заранее благодарен.
Вот рабочая версия
$(document).ready(function(){
$( "#test" ).autocomplete({
source: function(request, response){
$.ajax({
url: 'http://autocomplete.travelpayouts.com/jravia?locale=ru&with_countries=false',
data:{ q: request.term },
dataType: "jsonp",
jsonpCallback: 'callback',
success: function(data) {
response($.map(data, function(v,i){
var name = v.name || " ";
var text = v.city_fullname + ', ' + name ;
return text;
}));
}
});
},
minLength: 2
});
}); <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<input id="test" />
-
21:12
Оборудование для ресторана: новинки профессиональной кухонной техники
-
22:17
-
22:13
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
-
20:12
-
20:06
-
19:59
-
19:51
-
19:43
-
18:31
- Почему SERVER_ADDR имеет не тот IP 48061 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30577 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 24015 visits
- Как через css изменить цвет png изображения? 10423 visits
- Blob video url download 10015 visits
- Php curl запрос через прокси с авторизацией 9291 visits
- Работа с captcha vk api 8157 visits
© "hostciti.net" 18.4.2025 | 07:22