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

Question

In my angular app, I am using angucomplete-alt for populate the drop down. it works well.

On of my data has huge values(4487), cities, But it's impacts in the performance of generating drop down and user interactions. so, Is it possible to limit the angucomplete-alt - only to show 100 items ? and when user types the values let it bring the result from across the list values?

How to do this? is there any to achieve this?

Live Demo

Answer 1

Got a working solution. You can look for yourself here.

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

The biggest thing was you needed to redefine how localSearch is performed in the module. In the directive there's a function which searches through your data every time a keyup event occurs and this module allows you to redefine that function. So what I did was define that function in the scope and placed it in the directive (I set it to have 10 items max but I tried 100 as well and didn't have any issues).

This is the new javascript function (a lot of it was reverse engineered from what they had defined in the library):

// When this function is called the directive passes in two params, the string
// presently in the form and the array of items you have in local store
// str is input from the user and sites is the array of data

$scope.filterFunction = function(str, sites) {

    // Change this value to increase total items users see
    var maxLength = 10;

    var i, matches = []; // This array contains what the user sees


    var strLen = str.length; // I used this to ensure exact matching
    str = str.toLowerCase(); // Use to make case insensitive

    // Iterate through all site points
    for (i = 0; i < sites.length; i++) {
      var site = sites[i]

      // Choose parameters we want user to be able to filter
      var stateId = site.stateId.substring(0, strLen);
      var name = site.name.toLowerCase().substring(0, strLen);

        // Check for matches and if the list is larger than 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;
            }
        }
    }

    // What is displayed to users
    return matches;
}

Here's the modified HTML. IMPORTANT be sure you set minlength="1" otherwise the list will drop down in its entirety every time the user clicks the 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" // <- Be sure to set this!!
    text-no-results='false' 
    text-searching='false' 
    clear-on-blur='false' >