如何为ui-select添加不受过滤的固定提示选项？

你的思路完全可行！我们可以通过在过滤后的选项列表中添加一个禁用的固定提示项来实现需求，而且能保证这个提示不会被搜索过滤影响。下面是具体的实现步骤和修改后的代码：

核心思路 #

• 对搜索过滤后的选项进行截断，只保留前30条
• 如果过滤后的总条数超过30，就往截断后的列表末尾添加一个标记为“固定项”的选项（显示“更多结果...”）
• 把这个固定项设置为禁用状态，避免用户误选，同时通过样式区分它和普通选项

步骤1：在控制器中处理选项列表 #

首先需要在你的控制器里新增一个计算逻辑（或者在vm.loadOptions方法中处理），用来生成带截断和提示项的最终选项列表：

// 假设你的原始选项存在vm.rawOptions中，或者在vm.loadOptions加载后更新
vm.filteredOptions = function() {
  // 这里是本地过滤逻辑，如果你是远程加载过滤后的结果，直接用vm.options即可
  var filtered = vm.options.filter(function(option) {
    return option.name.toLowerCase().includes($select.search.toLowerCase());
  });

  const MAX_DISPLAY = 30;
  var displayList = filtered.slice(0, MAX_DISPLAY);

  // 如果总条数超过30，添加固定提示项
  if (filtered.length > MAX_DISPLAY) {
    displayList.push({
      name: '更多结果...',
      isConstantChoice: true, // 复用你原来的禁用标记
      isMoreOption: true // 新增标记，用于区分普通选项和提示项
    });
  }

  return displayList;
};

// 远程加载选项的逻辑保持不变，加载完成后更新vm.options即可
vm.loadOptions = function(search) {
  return yourApiService.getOptions(search).then(function(response) {
    vm.options = response.data;
  });
};

步骤2：修改ui-select的模板代码 #

把原来的ui-select-choices部分替换为以下代码，适配新的选项列表：

<ui-select ng-model="vm.selectedOption" close-on-select="true" on-select="vm.optionSelected($item)" spinner-enabled="true">
  <ui-select-match placeholder="{{'Select option'}}">
    <span ng-bind="$select.selected.name"></span>
  </ui-select-match>
  <ui-select-choices 
    repeat="option in vm.filteredOptions track by option.id" <!-- 无唯一id可改用$index -->
    refresh="vm.loadOptions($select.search)" 
    refresh-delay="200" 
    ui-disable-choice="option.isConstantChoice === true"
  >
    <!-- 普通选项显示高亮后的名称 -->
    <div ng-if="!option.isMoreOption" ng-bind-html="option.name | highlight: $select.search"></div>
    <!-- 提示项单独显示，不应用高亮 -->
    <div ng-if="option.isMoreOption" class="more-results-option">
      {{option.name}}
    </div>
  </ui-select-choices>
</ui-select>

步骤3：添加样式优化（可选） #

为了让提示项更显眼，可添加一点CSS样式：

.more-results-option {
  color: #666;
  text-align: center;
  padding: 8px 10px;
  font-style: italic;
}

关键说明 #

• 这个固定提示项不会被搜索过滤影响，因为它是在过滤截断后手动添加的，只要结果超过30条，就会稳定显示在列表底部
• 通过ui-disable-choice确保这个选项无法被选中，避免干扰用户正常选择
• 如果是远程加载数据，只要在vm.loadOptions中更新vm.options，vm.filteredOptions就会自动重新计算，适配新的搜索结果

这样用户滚动下拉列表时，就能清楚看到还有更多未显示的结果，引导他们继续输入更精确的关键词来缩小范围。

内容的提问来源于stack exchange，提问作者Euklides