Как настроить заголовок в выпадающем списке?

Question

[Николай Романов]

Нужно сделать заголовок над списком городов. Городов будет много, и некоторые повторяются у нас в России. Чтобы было понятно, нужно как то указать перед списком городов Регион к которому он относиться. И чтобы при поиске он был закреплен.

<div class="city-form-wrapper"><form class="city-form">
<div class="col-xs-4"><input class="city-input form-control" name="search_name" type="text" placeholder="Поиск города" /></div>
</form></div>

<script>
jQuery(document).ready(function() {
    var cities_data = {
   "Балашиха": "https://balashiha.#.ru",
	 "Бронницы": "https://bronnicy.#.ru",
	"Голицыно": "https://golicyno.#.ru",
	"Жуковский": "https://zhukovskij.#.ru",
      };
    jQuery(".city-form").submit(function(e){ e.preventDefault(); return false;});
    jQuery(".city-input").autocomplete({
        minLength: 0,
        // source: Object.keys(cities_data),
        source: function( request, response ) {
               var matcher = new RegExp( "^" + jQuery.ui.autocomplete.escapeRegex( request.term ), "i" );
             response( jQuery.grep( Object.keys(cities_data), function( item ){
                 return matcher.test( item );
             }) )},
        select: function(event, ui) {
            window.location.href = cities_data[ui.item.value];
        }
    }).focus(function() {
        jQuery(this).autocomplete("search", "");
    });
});
</script>

Пример

Answer 1

[FeST1VaL]

Ну как вариант просто еще обернуть в массив Стран чтобы массив был примерно таким... короче говоря вам надо как то привязать ваши города к странам

{
 name => 'Россия',
 values => {
 ...
 }
}

Comments

[Николай Романов]

понял что вы имеете ввиду, но не знаю как это реализовать) Код писал не я

[Nicol21]

Все верно и поставьте option disabled на Россию