如何在AngularJS中始终显示自动填充列表所有值（含输入无关文本时）

嘿，我完全懂你要的效果——不管输入框里敲了什么无关内容，下拉列表都得完整展示所有选项，而不是只过滤出匹配的项。下面给你一个实用的实现方案，包含完整的代码示例：

核心思路 #

默认的AngularJS过滤逻辑会自动筛掉不匹配的项，所以我们要绕过这个过滤行为：直接渲染全部列表数据，同时可以给匹配的文本添加高亮效果，既满足始终显示全部选项的需求，又不影响用户找到目标内容。

完整实现代码 #

HTML 结构

<div ng-app="autocompleteApp" ng-controller="autocompleteCtrl">
  <!-- 绑定输入框模型，可选：用focus/blur控制列表显示，若要始终可见可去掉这两个指令 -->
  <input 
    type="text" 
    ng-model="searchText" 
    placeholder="输入内容试试..."
    ng-focus="showList = true"
    ng-blur="showList = false"
  >
  
  <!-- 始终显示列表：直接设置ng-show="true"，或者移除ng-show让列表一直渲染 -->
  <ul class="autocomplete-list" ng-show="true">
    <li 
      ng-repeat="item in items" 
      ng-class="{ 'highlight': item.toLowerCase().includes(searchText.toLowerCase()) }"
      ng-click="selectItem(item)"
    >
      {{ item | highlightMatch: searchText }}
    </li>
  </ul>
</div>

CSS 样式（美化列表）

.autocomplete-list {
  list-style: none;
  padding: 0;
  border: 1px solid #eee;
  max-height: 220px;
  overflow-y: auto;
  margin: 4px 0 0 0;
  border-radius: 4px;
}

.autocomplete-list li {
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.autocomplete-list li:hover {
  background-color: #f8f9fa;
}

/* 匹配项高亮样式 */
.highlight {
  background-color: #fff3cd;
}

AngularJS 控制器与自定义过滤器

angular.module('autocompleteApp', [])
.controller('autocompleteCtrl', function($scope) {
  // 示例选项列表，你可以替换成自己的数据源
  $scope.items = ['Apple', 'Banana', 'Orange', 'Grape', 'Mango', 'Pineapple', 'Watermelon'];
  
  $scope.searchText = '';
  $scope.showList = true; // 默认让列表始终显示

  // 点击列表项填充输入框的方法
  $scope.selectItem = function(item) {
    $scope.searchText = item;
  };
})
// 自定义过滤器：高亮输入框匹配的文本
.filter('highlightMatch', function($sce) {
  return function(text, searchKeyword) {
    // 如果没有输入内容，直接返回原文本
    if (!searchKeyword) return $sce.trustAsHtml(text);
    
    // 正则匹配，忽略大小写
    const matchRegex = new RegExp(searchKeyword, 'gi');
    // 给匹配的文本添加高亮样式
    return $sce.trustAsHtml(text.replace(matchRegex, '<span style="color: #dc3545; font-weight: 600;">$&</span>'));
  };
});

关键细节说明 #

• 绕过默认过滤：没有使用AngularJS内置的filter过滤器，ng-repeat="item in items"会直接遍历所有选项，确保列表始终完整显示。
• 匹配项高亮：自定义的highlightMatch过滤器会给输入内容匹配的文本添加样式，帮助用户快速定位目标，同时不隐藏任何选项。
• 列表显示控制：如果需要列表始终可见，直接设置ng-show="true"或者移除ng-show指令；如果需要聚焦显示、失焦隐藏，就用ng-focus和ng-blur控制showList变量。
• 选项选择功能：给列表项添加ng-click事件，点击后可以将选中的内容填充到输入框，提升交互体验。

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