如何將jQuery自動完成與json文件一起使用？

我正在學習Ajax和jQuery，並嘗試使用json文件作爲數據源。我正在使用jQuery UI自動完成小部件來幫助用戶選擇一個選項。我知道我離開賽道非常糟糕。如何將jQuery自動完成與json文件一起使用？

我的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); 
      }); 
      ) 
      }); 
     }  
    }); 
});

來源

2017-03-14 Hannan

我修正了一些語法錯誤，然後寫了這個例子中真正得到你跳啓動。

$(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>

來源

2017-03-14 20:23:01 Neil

謝謝你，但我想選擇的選項之一。現在，當我搜索並且不允許我選擇其中一個選項時，它只是給我一個無序列表列表。這就是我選擇自動填充小部件的原因。 – Hannan

更新了我的代碼。 – Neil

可以在request推html到陣列，傳遞數組response，在.autocomplete("instance")._renderItem與html組到第二個參數item，.value屬性，這應該是html集創建一個<li>元件在request之內，並傳遞給response;追加<li>到第一個參數ul，returnul從._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/

來源

2017-03-14 21:11:27 guest271314

如何將jQuery自動完成與json文件一起使用？

回答

相關問題