-1

Here i want to develop bus ticket booking website i want to display cities when the user types. I have tried many articles they are all calling remote api to get the data. But i don't know how to get the data from local json. i have done it autocomplete extender for data from server in asp.net. Now i want to do it in jquery for local json file

here is my json file :

{"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"}}

i don't know how to implement in jquery or angularjs i have tried many articles found on the internet jQuery autocomplete using a local json file? autocomplete textbox and angularjs

Community
  • 1
  • 1
Tajkumar
  • 371
  • 2
  • 4
  • 21

1 Answers1

1

I would use angular ui-select. It offers very flexible search and display. You can use local data or retrieve the data from $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>
Enkode
  • 4,515
  • 4
  • 35
  • 50