自动完成Json

时间:2015-01-03 18:51:54

标签: javascript jquery json autocomplete

我有一个国家和城市的Json数据。我想知道如何解析这些数据,以便在HTML中获得一个自动完成输入框,从使用jQuery输入的子字符串开始显示JSON中的城市。我正在使用jquery-ui。我面临的问题是json的存储方式。没有给出关键值,因为国家/地区下的所有名称都是城市。我无法使用jquery-ui.js https://gist.githubusercontent.com/mayurah/5f4a6b18b1aa8c26910f/raw/countriesToCities.json 我得到的代码就是:

  $(function() {
   function log( message ) {
     $( "<div>" ).text( message ).prependTo( "#log" );
     $( "#log" ).scrollTop( 0 );
   }

  $( "#location" ).autocomplete({
   source: function( request, response ) {
    $.ajax({
      url: "https://gist.githubusercontent.com/mayurah/5f4a6b18b1aa8c26910f/raw/countriesToCities.json",
      dataType: "json",
      data: {
        q: request.item
      },
      success: function( data ) {
        response( data );
      }
     });
   },
   minLength: 3,
   select: function( event, ui ) {
    log( ui.item ?
      "Selected: " + ui.item.label :
      "Nothing selected, input was " + this.value);
   },
   open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
   },
   close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
   }
  });    
 });    

1 个答案:

答案 0 :(得分:1)

你在寻找这样的东西:

response( 
    $.map(data, function (list) { 
        $.map(list, function(city) {
            return { label: city }; 
        }); 
    }));