jquery ui autocomplete json

222

03 февраля 2020, 01:00

Есть такой 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> ?

Answer 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>