Форум

Patron · #1 (**permalink**) 28.11.2017, 18:52

Здравствуйте!Дорогие форумчане. Есть вопрос на который не могу на гуглить ответ. Есть два инпута для один для страны другой для города и два 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": "Чернигов"}
}

Как сделать два последовательных инпута с фильтрованым по стране аутокомплитом? Есть у кого-то примеры?

Dilettante_Pro · #2 (**permalink**) 28.11.2017, 19:03

Patron,
По первому объекту создать select.
На основании выбора по первому select динамически формировать по второму объекту второй select с фильтрацией объекта по стране.
Только у вас второй объект какой-то странный...

laimas · #3 (**permalink**) 28.11.2017, 19:07

Сообщение от Dilettante_Pro

Только у вас первая часть второго объекта какая-то странная...

Это ID города, просто в данном случае первыми свойствами второго объекта должны быть ID стран, а их значениями массив объектов городов. Не подходящая структура выдана.

А что странного, так это "1": {"country": 1, "name": "Ukraine"}, что на Украине есть город Украина?

Nexus · #4 (**permalink**) 28.11.2017, 19:39

https://jsfiddle.net/yw3znbsy/

рони · #5 (**permalink**) 28.11.2017, 22:41

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>

Patron · #6 (**permalink**) 29.11.2017, 16:40

Всем спасибо за ответы! Ответы просто супер!

Форум

Справочник

Discord чат

Курсы javascript