jquery - angularjs `angucomplete-alt` - how to limit the drop down list with some numbers? -


in angular app, using angucomplete-alt populate drop down. works well.

on of data has huge values(4487), cities, it's impacts in performance of generating drop down , user interactions. so, possible limit angucomplete-alt - show 100 items ? , when user types values let bring result across list values?

how this? there achieve this?

live demo

got working solution. can here.

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

the biggest thing needed redefine how localsearch performed in module. in directive there's function searches through data every time keyup event occurs , module allows redefine function. did define function in scope , placed in directive (i set have 10 items max tried 100 , didn't have issues).

this new javascript function (a lot of reverse engineered had defined in library):

// when function called directive passes in 2 params, string // presently in form , array of items have in local store // str input user , sites array of data  $scope.filterfunction = function(str, sites) {      // change value increase total items users see     var maxlength = 10;      var i, matches = []; // array contains user sees       var strlen = str.length; // used ensure exact matching     str = str.tolowercase(); // use make case insensitive      // iterate through site points     (i = 0; < sites.length; i++) {       var site = sites[i]        // choose parameters want user able filter       var stateid = site.stateid.substring(0, strlen);       var name = site.name.tolowercase().substring(0, strlen);          // check matches , if list larger max elements         // terminate function         if (name.indexof(str, 0) !== -1) {             matches.push(site);             if (matches.length > maxlength) {               return matches;             }         }          if (stateid.indexof(str, 0) !== -1) {             matches.push(site);             if (matches.length > maxlength) {               return matches;             }         }     }      // displayed users     return matches; } 

here's modified html. important sure set minlength="1" otherwise list drop down in entirety every time user clicks input field.

  <angucomplete-alt      id="prod_details"      placeholder="search product id"      pause="0"      selected-object=""      local-data="sites"      local-search="filterfunction" // <- new function goes here     search-fields="name"      title-field="name,stateid"     minlength="1" // <- sure set this!!     text-no-results='false'      text-searching='false'      clear-on-blur='false' > 

Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -