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

Question

在我的 Angular 应用程序中，我使用 angucomplete-alt 来填充下拉列表。效果很好。

我的数据有巨大的值(value)(4487)，城市，但它对生成下拉菜单和用户交互的性能有影响。那么，是否可以限制 angucomplete-alt - 仅显示 100 个项目？当用户输入值时让它带来列表值中的结果？

如何做到这一点？有什么办法可以实现这一点吗？

Live Demo

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