如何在AngularJS中禁用智能搜索下拉框的输入字段（避免全字段禁用）

我太懂你的痛点了——用disabled属性直接把整个下拉组件锁死，连选择功能都用不了，这完全不是想要的效果。下面给你几个可行的方案，根据你用的下拉组件类型来选：

方案1：使用ng-readonly指令（适用于原生或大部分UI组件） #

readonly属性只会让输入框无法手动输入，但不会禁用整个组件的交互功能，下拉选择依然可以正常使用。结合AngularJS的ng-readonly指令，还能灵活控制只读状态：

原生HTML5 datalist示例 #

<input type="text" 
       list="itemOptions" 
       ng-model="selectedItem" 
       ng-readonly="true">
<datalist id="itemOptions">
  <option ng-repeat="item in itemList" value="{{item.label}}"></option>
</datalist>

Angular-UI的ui-select组件示例 #

如果用的是常用的ui-select智能下拉，给匹配输入框添加ng-readonly即可：

<ui-select ng-model="selectedItem" theme="bootstrap">
  <ui-select-match 
    placeholder="请选择项目" 
    ng-readonly="true">
    {{$select.selected.label}}
  </ui-select-match>
  <ui-select-choices repeat="item in itemList | filter: $select.search">
    {{item.label}}
  </ui-select-choices>
</ui-select>

方案2：自定义指令阻止输入事件（更灵活的控制） #

如果ng-readonly在某些组件里效果不符合预期，你可以写一个自定义指令，直接阻止输入框的键盘输入、粘贴等操作，但保留下拉按钮的点击功能：

自定义指令代码 #

angular.module('yourAppName').directive('blockCustomInput', function() {
  return {
    link: function(scope, element) {
      // 阻止所有键盘输入事件
      element.on('keydown keyup keypress', function(e) {
        e.preventDefault();
      });
      // 阻止粘贴操作，防止通过粘贴输入自定义内容
      element.on('paste', function(e) {
        e.preventDefault();
      });
    }
  };
});

在组件中使用指令 #

<ui-select ng-model="selectedItem" theme="bootstrap">
  <ui-select-match 
    placeholder="请选择项目" 
    block-custom-input>
    {{$select.selected.label}}
  </ui-select-match>
  <ui-select-choices repeat="item in itemList | filter: $select.search">
    {{item.label}}
  </ui-select-choices>
</ui-select>

方案3：CSS辅助调整（针对特殊样式需求） #

如果你的组件因为readonly出现样式异常，可以配合CSS调整视觉效果，比如让输入框看起来可点击，但实际无法输入：

/* 移除readonly输入框的默认灰色样式 */
input[readonly] {
  background-color: #fff;
  cursor: pointer;
}

这些方案的核心都是只禁用输入框的手动输入功能，保留下拉选择的交互，完美解决你之前用disabled带来的问题。

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