Question

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

我的数据有巨大的价值（4487），城市，但它对产生下拉和用户互动的性能有影响。那么，是否可以限制angucomplete-alt - 仅显示100个项目？当用户输入值时，让它从列表值中得出结果吗？

怎么做？有没有实现这个目标？

Answer 1

找到了有效的解决方案。你可以在这里找自己。

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

最重要的是你需要重新定义模块中localSearch的执行方式。在指令中，有一个函数可以在每次键盘事件发生时搜索您的数据，并且此模块允许您重新定义该函数。所以我所做的是在范围中定义该函数并将其放在指令中（我将其设置为最多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' >

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

1 个答案: