angularjs`angucomplete-alt`-如何用一些数字限制下拉列表？

Question

在我的有角度的应用程序中，我angucomplete-alt用于填充下拉列表。它运作良好。

我的数据中有个具有巨大的价值（4487），城市，但它会影响生成下拉列表和用户交互的性能。因此，是否可以限制angucomplete-alt-仅显示100个项目？以及当用户键入值时，它会从列表值中带来结果吗？

这该怎么做？有什么办法做到这一点？

现场演示

Answer 1

有一个可行的解决方案。您可以在这里寻找自己。

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

最大的事情是您需要重新定义localSearch模块中的执行方式。该指令中有一个函数，该函数在每次发生keyup事件时都在您的数据中进行搜索，并且该模块允许您重新定义该函数。因此，我要做的是在范围内定义该函数并将其放在指令中（我将其设置为最多10个项目，但我也尝试了100个项目，没有任何问题）。

这是新的javascript函数（其中许多是根据他们在库中定义的东西进行反向工程）：

// 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;
}

这是修改后的HTML。重要说明：请确保您进行了设置，minlength="1"否则每次用户单击输入字段时，列表将全部下拉下来。

  <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' >