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?
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
Post a Comment