如何将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文件一起使用？

回答

相关问题