如何使用本地 json 文件 jquery 或 angularjs 为文本框实现自动完成答案

【问题标题】：How to Implement autocomplete for a textbox using local json file jquery or angularjs如何使用本地 json 文件 jquery 或 angularjs 为文本框实现自动完成
【发布时间】：2016-01-04 03:35:09
【问题描述】：

在这里我想开发巴士票预订网站，我想在用户输入时显示城市。我尝试了很多文章，他们都在调用远程 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

【问题讨论】：

angular-ui.github.io/bootstrap/#/typeahead

标签： javascript jquery json angularjs autocomplete

【解决方案1】：

我会使用角度 ui-select。它提供了非常灵活的搜索和显示。您可以使用本地数据或从 $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>

【讨论】：