jsonファイルでjQueryオートコンプリートを使用するには？

Question

私はAjaxとjQueryを学び、jsonファイルをデータソースとして使用しようとしています。私は、ユーザーが1つのオプションを選択するのを助けるjQuery UIオートコンプリートウィジェットを使用しています。私はトラックからひどく離れていることを知っている。

私のJSONファイル：

[ 
    {"iata":"AAC", "name":"El Arish"}, 
    {"iata":"AAE", "name":"Annabah"}, 
    {"iata":"AAF", "name":"Apalachicola"}, 
    {"iata":"AAG", "name":"Arapoti"}, 
    {"iata":"AAH", "name":"Aachen"}, 
    {"iata":"AAI", "name":"Arraias"}, 
    {"iata":"AAJ", "name":"Awaradam"}, 
    {"iata":"AAK", "name":"Buariki"}, 
    {"iata":"AAL", "name":"Aalborg"}, 
    {"iata":"AAM", "name":"Malamala"}, 
    {"iata":"AAN", "name":"Al Ain"} 
] 

私はJavaScript：

$(document).ready(function() { 
    $('#search').autocomplete({ 
     source: function (request, response) { 
      var searchField = $('#search').val(); 
      var myExp = new RegExp(searchField, "i"); 
      $.getJSON("beta.json", function (data) { 
       var output = '<ul class="searchresults">'; 
       $.each(data, function (key, val) { 
        if ((val.iata.search(myExp) !== -1) || 
          (val.name.search(myExp) !== -1)) { 
         output += '<li>'; 
         output += '<h2>' + val.iata + '</h2>'; 
         output += '<p>' + val.name + '</p>'; 
         output += '</li>'; 
        } 
       }); 
       output += '</ul>'; 
       $('#update').html(output); 
      }); 
      ) 
      }); 
     }  
    }); 
}); 

Answer 1

私はいくつかの構文エラーを修正して、本当にあなたが開始ジャンプ得るために、この例を書きました。

$(function() { 
 
\t $.getJSON("http://neil.computer/stack/beta.json", function(data) { 
 
\t \t autoComplete = []; 
 
\t \t for (var i = 0, len = data.length; i < len; i++) { 
 
\t \t \t autoComplete.push(data[i].name + ", " + data[i].iata); 
 
\t \t } 
 
\t \t $("#tags").autocomplete({ 
 
\t \t \t source: autoComplete 
 
\t \t }); 
 
\t }); 
 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<div class="ui-widget"> 
 
\t <label for="tags">Tags: </label> 
 
\t <input id="tags"> 
 
</div>

Answer 2

あなたがhtml設定されるべき第二の引数item、.valueプロパティにhtmlセットで<li>要素を作成し、requestでアレイにhtmlプッシュ.autocomplete("instance")._renderItemで、responseに配列を渡すことができrequest内にあり、responseに渡されます。 ._renderItem

var elem = $("#search"); 
    $.ajaxSetup({ 
    context: elem 
    }); 
    elem.autocomplete({ 
     minLength: 1, 
     source: function(request, response) { 
     $.getJSON("beta.json") 
      .then(function success(data) { 
      var searchField = elem.val(); 
      var myExp = new RegExp(searchField, "i"); 
      var res = []; 
      $.each(data, function(key, val) { 
       if ((val.iata.search(myExp) !== -1) || 
       (val.name.search(myExp) !== -1)) { 
       res.push("<h2>" + val.iata + "</h2>" + "<p>" + val.name + "</p>") 
       } 
      }); 
      response(res); 

      }, function error(jqxhr, textStatus, errorThrown) { 
      console.log(textStatus, errorThrown) // log `$.ajax` errors 
      }) 
     } 
    }) 
    .autocomplete("instance")._renderItem = function(ul, item) { 
     return $("<li>", { 
     html: item.value 
     }).appendTo(ul) 

    }; 

jsfiddle http://jsfiddle.net/wr1wg5df/11/