如何使用本地json文件jquery或angularjs實現文本框的自動完成

Question

這裏我想開發公交票預訂網站，我想在用戶輸入時顯示城市。我已經嘗試了很多文章，他們都調用遠程API來獲取數據。但我不知道如何從本地json獲取數據。我已經在asp.net中爲服務器的數據完成了自動填充擴展器。現在，我想這樣做jQuery的本地JSON文件

這裏是我的JSON文件：

{"stationList":[{"stationName":"10 dol","stationId":-1},{"stationName":"Adduroad","stationId":4508},{"stationName":"Adilabad","stationId":4198},{"stationName":"Adoni","stationId":2893},{"stationName":"Afzulgunj","stationId":-1},{"stationName":"Agaratala","stationId":-1},{"stationName":"Agartala","stationId":-1},{"stationName":"Agra","stationId":2486},{"stationName":"Ahmedabad","stationId":2434}, 
"apiStatus":{"success":true,"message":"SUCCESS"}} 

我不知道如何在jQuery的或angularjs實現我曾嘗試在互聯網上發現了許多文章 jQuery autocomplete using a local json file? autocomplete textbox and angularjs

Answer 1

我會使用角度ui選擇。它提供了非常靈活的搜索和顯示。您可以使用本地數據或檢索數據從$ HTTP GET：

http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview

<h3>Array of objects with single property binding</h3> 
    <ui-select multiple ng-model="multipleDemo.selectedPeopleSimple" theme="select2" ng-disabled="disabled" style="width: 800px;"> 
    <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> 
    <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}"> 
     <div ng-bind-html="person.name | highlight: $select.search"></div> 
     <small> 
     email: {{person.email}} 
     age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> 
     </small> 
    </ui-select-choices> 
    </ui-select> 
    <p>Selected: {{multipleDemo.selectedPeopleSimple}}</p>