如何在AngularJS中实现下拉搜索？添加双下拉筛选器方法求助

嘿，我来帮你搞定AngularJS里下拉菜单的搜索和筛选功能！结合你给出的文件夹下拉代码，我分步骤给你说明怎么实现，还有两个下拉联动筛选的思路～

AngularJS原生的<select>本身不带搜索，但我们可以用它的*内置过滤器（filter）*搭配输入框来实现。直接修改你现有的文件夹下拉代码，添加一个搜索输入框，然后在ng-options里过滤选项：

<!--folder start-->
<div class="form-group">
  <div class="col-sm-2">
    <!-- 新增文件夹搜索输入框 -->
    <input type="text" class="form-control" placeholder="搜索文件夹" ng-model="folderSearchText">
    <select class="form-control" name="iPkFolderId" data-ng-model="iPkFolderId" ng-change="getchange(iPkFolderId)" id="iPkFolderId" required
            data-ng-options="option.iPkFolderId as option.vFolderName for option in getFolder | filter:folderSearchText">
      <option value="">Select Folder</option>
    </select>
  </div>
</div>
<!--folder end-->

小细节优化 #

如果只想让搜索匹配文件夹名称（而不是对象的所有属性），可以把过滤器改成精准匹配：

filter:{vFolderName: folderSearchText}

假设你的分类列表getCategory里的每个分类对象，都有iPkFolderId字段关联对应的文件夹ID，我们可以实现“选文件夹后自动过滤分类，同时分类也支持搜索”的效果：

<!--category start-->
<div class="form-group">
  <div class="col-sm-2">
    <!-- 新增分类搜索输入框 -->
    <input type="text" class="form-control" placeholder="搜索分类" ng-model="categorySearchText">
    <select class="form-control" name="iPkCategoryId" data-ng-model="iPkCategoryId" id="iPkCategoryId" required
            data-ng-options="option.iPkCategoryId as option.vCategoryName for option in getCategory | filter: folderFilter | filter:{vCategoryName: categorySearchText}">
      <option value="">Select Category</option>
    </select>
  </div>
</div>
<!--category end-->

然后在控制器里定义folderFilter函数，实现联动逻辑：

$scope.folderFilter = function(category) {
  // 如果没选文件夹，显示所有分类；选了就只显示对应文件夹下的分类
  return !$scope.iPkFolderId || category.iPkFolderId === $scope.iPkFolderId;
};

这样一来：

• 没选文件夹时，分类下拉显示所有选项，且支持搜索
• 选了文件夹后，分类下拉自动过滤出该文件夹下的选项，同时仍支持搜索

如果觉得原生select+输入框的体验不够流畅（比如搜索框和下拉分离），可以用AngularJS的ui-select组件（自带内嵌搜索框、高亮匹配文本）。示例代码如下：

<!-- 文件夹搜索下拉 -->
<div class="form-group">
  <div class="col-sm-2">
    <ui-select ng-model="iPkFolderId" theme="bootstrap" ng-change="getchange(iPkFolderId)" required>
      <ui-select-match placeholder="Select Folder">{{$select.selected.vFolderName}}</ui-select-match>
      <ui-select-choices repeat="option.iPkFolderId as option in getFolder | filter: $select.search">
        <div ng-bind-html="option.vFolderName | highlight: $select.search"></div>
      </ui-select-choices>
    </ui-select>
  </div>
</div>

<!-- 分类搜索下拉（联动文件夹） -->
<div class="form-group">
  <div class="col-sm-2">
    <ui-select ng-model="iPkCategoryId" theme="bootstrap" required>
      <ui-select-match placeholder="Select Category">{{$select.selected.vCategoryName}}</ui-select-match>
      <ui-select-choices repeat="option.iPkCategoryId as option in getCategory | filter: folderFilter | filter: $select.search">
        <div ng-bind-html="option.vCategoryName | highlight: $select.search"></div>
      </ui-select-choices>
    </ui-select>
  </div>
</div>

• 确保你的getFolder和getCategory数组已经在控制器里正确初始化（比如从后端接口获取后赋值给$scope）
• 如果用内置过滤器，记得根据需求选择模糊匹配还是精准匹配，避免出现意外的过滤结果
• 联动筛选时，要处理好“未选择文件夹”的情况，避免分类下拉出现空选项

内容的提问来源于stack exchange，提问作者poojan mehta PM