0

Есть такой json файл:

[
  {
    "coords": {
      "lat": "52.65",
      "lon": "90.08333"
    },
    "district": "Сибирский",
    "name": "Абаза",
    "population": 17111,
    "subject": "Хакасия"
  },
  {
    "coords": {
      "lat": "53.71667",
      "lon": "91.41667"
    },
    "district": "Сибирский",
    "name": "Абакан",
    "population": 165183,
    "subject": "Хакасия"
  }, ...

И такие наработки:

  $( ".city" ).autocomplete({
    source: function( request, response ) {
      $.ajax({
        url: "https://raw.githubusercontent.com/pensnarik/russian-cities/master/russian-cities.json",
        dataType: "json",
        data: {
          term: request.term
        },
        minLength: 1,
        success: function( data ) {
          //response( data );
          response( $.map( data, function( key, value ) {
            
            return {
              label: key.name,
              value: key.subject
            }
          }));
        },
        select: function( event, ui ) {
          console.log();
        }
      });
    }
  });
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



  <input type="text" class="city"/>
  
  
  <div id="res"></div>

Вопрос: Как правильно реализовать jquery ui autocomplete с json файлом? Как вывести выбранный город внутри какого-нибудь блока, например, в <div id="res"></div> ?

1
  • Если у вас имеется статичный файл, то закгрузите его единожды, а потом на строне клиента делайте фильтрацию. нет смысла аяксом его дергать каждый раз при использовании поля
    – teran
    18 апр 2019 в 7:53

1 ответ 1

1

Передача term аяксом используется, когда фильтрация осуществляется на стороне сервера, а готовый результату же возвращается как возможные вариантов комплита. Если же у вас статичный файл, то вы сначала его загружаете, делаете маппинг к нужному виду, и результат указываете как источник.

что-то вроде такого:

$(function(){
   var url = "https://raw.githubusercontent.com/pensnarik/russian-cities/master/russian-cities.json";
   
   $.getJSON(url, function(src){
       var data = src.map(function(v){
                        return {
                             value: v.name, 
                             label: v.name + " ("  + v.subject + ")"
                        }; 
                     });

        $("input").autocomplete({
            source: data,
            select: function(event, ui){
                 $("#res").text(ui.item.value);
            }
        });
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

<input type="text" class="city"/>
<div id="res"></div>

4
  • Спасибо, вроде, работает, а вроде и нет! Совпадение только после ввода всего имени, а хотелось бы после первой или второй буквы уже выводились схожие варианты. Т.е. Ввожу М ... выводит разные вообще города и на А и на И ... пока не введу все Москва, только тогда находит уже .
    – SVE
    18 апр 2019 в 8:25
  • jsbin.com/dazudew/edit?html,js,output
    – SVE
    18 апр 2019 в 8:38
  • @HamSter тут вопрос в том, как осуществляется фильтрация. Приведенном варианте (оформил сниппетом) ищутся просто вхождения подстроки. Моск-ву когда вводишь, лейблы фильтруются, и ищется все варианты из московской области. Если нужно искать часто по городу, то логику следует определить в виде своей функции фильтрации, которая например будет обрабатывать только название города, и например, только с начала строки, а не в середине. Так что если вы для примера введет Петрозаводск, то уже на первых буквах будет весьма мало совпадений.
    – teran
    18 апр 2019 в 8:53
  • Спасибо огромное, это я ошиблась, ведь выводит города по Московской области уже ... все в порядке!
    – SVE
    18 апр 2019 в 8:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.