角材料自动完成增强

Question

Hi i follow this guide to my project https://material.angularjs.org/latest/demo/autocomplete and https://www.tutorialspoint.com/angular_material/angular_material_autocomplete.htm

in the example they load the state first to search a state. and then you can search the state this was a good example.

in my case how about when you search a name and there were 6k names or more that was a big problem to load and make my web more slower

so i give it a try to create my own. getting a resource while searching and this is what i come out.

here's my view (slim format)

div layout="row"
  md-autocomplete md-item-text="item.name" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.getMatches(searchText)" md-no-cache="true" md-search-text="searchText" md-selected-item="item" md-floating-label="Client Name" flex=""
    md-item-template
      span md-highlight-flags="^i" md-highlight-text="searchText" 
        | {{item.name}} 

my controller(coffee format)

 @getMatches = (searchText) =>
  deferred = $q.defer()
  if  searchText.length >= 2
    name = searchText
    test = Client::Search.query {name: name}, (data) =>
      states = data.clients
      if states.length == 0
        name = searchText + "*"
        test = Client::Search.query {name: name}, (data) =>
          states = data.clients
      $timeout (=>
        deferred.resolve states
        return
        ), 1000
    deferred.promise
  else
    test = []

when i get more than 2 letters in my search my resource will be trigger and will start searching. my problem if i search long word my web will be get slower.

additional: when i type every letter my server side will response example if i type uni(for university) the word uni will get to my server side and respond and so on and so on then when i complete the word "university" i have so many resource that cause me to slow

enter image description here

any idea how can inhance this and more faster???

Answer 1

Try using ajax call from server side, already answered here

Angular Material autocomplete with $http call

Answer 2

这个链接对我有帮助。 如何在AngularJS中编写反跳服务，我使用反跳来增强我的自动完成功能，希望对大家有所帮助，谢谢:)