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

时间:2015-10-07 03:10:18

标签: javascript jquery json angularjs autocomplete

这里我想开发公交车票预订网站我想在用户输入时显示城市。我已经尝试过很多文章,他们都在调用远程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

1 个答案:

答案 0 :(得分: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>