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

Posted 2023-02-22

【中文标题】angularjs`angucomplete-alt` - 如何用一些数字限制下拉列表？

【英文标题】：angularjs `angucomplete-alt` - how to limit the drop down list with some numbers?

【发布时间】：2016-12-31 01:29:36

【问题描述】：

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

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

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

Live Demo

【参考方案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' >

【讨论】：

我可以应用这个功能，当数据超过 100+ 时？如果是的话如何添加条件？

我首先想到的是通过检查总元素将filterFunction 设置为一个空函数。类似于：$scope.filterFunction = ($scope.sites.length < 100) ? function() //Empty function : function(str, sites) // Rest of code here...。我确信有一种更清洁的方法可以做到这一点，但我想不出我的头顶。