Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.11.2017, 18:52
Интересующийся
Отправить личное сообщение для Patron Посмотреть профиль Найти все сообщения от Patron
 
Регистрация: 06.06.2017
Сообщений: 17

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": "Чернигов"}
}

Как сделать два последовательных инпута с фильтрованым по стране аутокомплитом? Есть у кого-то примеры?
Ответить с цитированием
  #2 (permalink)  
Старый 28.11.2017, 19:03
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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

Последний раз редактировалось Dilettante_Pro, 28.11.2017 в 19:08.
Ответить с цитированием
  #3 (permalink)  
Старый 28.11.2017, 19:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

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

Последний раз редактировалось laimas, 28.11.2017 в 19:12.
Ответить с цитированием
  #4 (permalink)  
Старый 28.11.2017, 19:39
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,705

https://jsfiddle.net/yw3znbsy/

Последний раз редактировалось Nexus, 28.11.2017 в 19:42.
Ответить с цитированием
  #5 (permalink)  
Старый 28.11.2017, 22:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #6 (permalink)  
Старый 29.11.2017, 16:40
Интересующийся
Отправить личное сообщение для Patron Посмотреть профиль Найти все сообщения от Patron
 
Регистрация: 06.06.2017
Сообщений: 17

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Стоит ли изучать нативный js? Или JQuery проще? EmperioAf Оффтопик 37 06.06.2017 23:16
JQuery Autocomplete Как получить данные, вводимые пользователем в поле? decadent42 jQuery 7 30.10.2015 21:55
Игра орел или решка на jquery. В любом случаи выводит вы проиграли! Dimaz jQuery 4 25.12.2009 15:04
Помогите внедрить свой jQuery в другой A.N.R.I jQuery 25 19.07.2009 01:50
плагин autocomplete от jquery Anthony jQuery 0 14.12.2008 22:48