JQuery Autocomplete или другой аутокомплит
Здравствуйте!Дорогие форумчане. Есть вопрос на который не могу на гуглить ответ. Есть два инпута для один для страны другой для города и два json файла с ними. И после выбора страны должен выбираться в другом инпуте только тот город который соотетствует стране.
Страны:
{
"1": "Ukraine",
"2": "Germany",
"3": "France",
"4": "Spain",
"5": "Sweden",
"6": "USA",
"7": "Canada",
"8": "Moldova",
"9": "Belarus",
"10": "Poland"
}
Города:
{
"1": {"country": 1, "name": "Ukraine"},
"2": {"country": 3, "name": "Paris"},
"3": {"country": 4, "name": "Madrid"},
"4": {"country": 6, "name": "Houston"},
"5": {"country": 7, "name": "Montreal"},
"6": {"country": 8, "name": "Кишинев"},
"7": {"country": 9, "name": "Minsk"},
"8": {"country": 10, "name": "Warsaw"},
"100": {"country": 1, "name": "Львов"},
"101": {"country": 1, "name": "Николаев"},
"103": {"country": 1, "name": "Переяслав-Хмельницкий"},
"104": {"country": 1, "name": "Каменец-Подольский"},
"105": {"country": 1, "name": "Donetsk"},
"106": {"country": 1, "name": "Kharkov"},
"107": {"country": 1, "name": "Луцк"},
"108": {"country": 1, "name": "Poltava"},
"109": {"country": 1, "name": "Черновцы"},
"299": {"country": 1, "name": "Чернигов"},
"333": {"country": 1, "name": "Чернигов"}
}
Как сделать два последовательных инпута с фильтрованым по стране аутокомплитом? Есть у кого-то примеры? |
Patron,
По первому объекту создать select. На основании выбора по первому select динамически формировать по второму объекту второй select с фильтрацией объекта по стране. Только у вас второй объект какой-то странный... |
Цитата:
А что странного, так это "1": {"country": 1, "name": "Ukraine"}, что на Украине есть город Украина? |
|
autocomplete country city
Patron,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var $_searchCountry = $("#search-country");
var country = {
1: "Ukraine",
2: "Germany",
3: "France",
4: "Spain",
5: "Sweden",
6: "USA",
7: "Canada",
8: "Moldova",
9: "Belarus",
10: "Poland"
};
$.ui.autocomplete.prototype._renderItem = function(ul, item) {
var re = new RegExp($.ui.autocomplete.escapeRegex(this.term), "i");
var t = item.label.replace(re, "<span style='font-weight:600;color:#FF0000;'>" + "$&" + "</span>");
return $("<li></li>").append("<a>" + t + "</a>").appendTo(ul)
};
$_searchCountry.autocomplete({
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.map(Object.keys(country), function(item) {
return {
value: country[item],
label: country[item]
}
}).filter(function(item) {
return matcher.test(item.label)
}))
}
});
var city = {
"1": {
"country": 1,
"name": "Kiev"
},
"2": {
"country": 3,
"name": "Paris"
},
"3": {
"country": 4,
"name": "Madrid"
},
"4": {
"country": 6,
"name": "Houston"
},
"5": {
"country": 7,
"name": "Montreal"
},
"6": {
"country": 8,
"name": "Кишинев"
},
"7": {
"country": 9,
"name": "Minsk"
},
"8": {
"country": 10,
"name": "Warsaw"
},
"100": {
"country": 1,
"name": "Львов"
},
"101": {
"country": 1,
"name": "Николаев"
},
"103": {
"country": 1,
"name": "Переяслав-Хмельницкий"
},
"104": {
"country": 1,
"name": "Каменец-Подольский"
},
"105": {
"country": 1,
"name": "Donetsk"
},
"106": {
"country": 1,
"name": "Kharkov"
},
"107": {
"country": 1,
"name": "Луцк"
},
"108": {
"country": 1,
"name": "Poltava"
},
"109": {
"country": 1,
"name": "Черновцы"
},
"299": {
"country": 1,
"name": "Чернигов"
},
"333": {
"country": 1,
"name": "Чернигов"
}
}
var $_searchCity = $("#search-city");
$_searchCity.autocomplete({
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
var land = $_searchCountry.val();
land = Object.keys(country).filter(function(item) {
return country[item] == land
});
var town = Object.keys(city).filter(function(item) {
return city[item].country == land
});
response($.map(town, function(item) {
return {
value: city[item].name,
label: city[item].name
}
}).filter(function(item) {
return matcher.test(item.label)
}))
},
minLength: 0
});
});
</script>
</head>
<body>
<label>Search country:</label>
<input id="search-country" type="text" />
<label>Search city:</label>
<input id="search-city" type="text" />
</body>
</html>
|
Всем спасибо за ответы! Ответы просто супер!
|
| Часовой пояс GMT +3, время: 13:01. |