AngularJS中HTML5 datalist的ng-click事件失效问题求助

我懂你遇到的麻烦了——原生<datalist>元素根本不支持Angular的ng-click指令！这是因为浏览器对datalist的<option>有特殊处理，不会触发点击事件，所以你绑定的ng-click完全不会执行。不过别担心，有两个靠谱的解决方案能帮你实现需求：

方案一：监听输入框的变化事件（推荐原生datalist场景） #

当用户从datalist选中选项时，输入框的ng-model一定会更新。我们可以利用这个特性，监听输入框的ng-change事件，根据输入值反向匹配对应的key（也就是你要的URL）。

修改后的HTML代码 #

<h2>Custom search field</h2>
<div id="custom-search-input">
  <div class="input-group col-md-12">
    <input type="text" class="form-control input-lg" list="suggestions" 
           placeholder="search" ng-model="obj.searchText" 
           ng-focus="searchSuggest()" ng-change="handleSelection(obj.searchText)" />
    <span class="input-group-btn">
      <button class="btn btn-info btn-lg" type="button" ng-click="showProduct(obj)">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </span>
  </div>
</div>
<div>
  <datalist id="suggestions">
    <option ng-repeat="values in suggestionResults track by $index" 
            ng-repeat="(key,data) in values" value="{{data}}">
    </option>
  </datalist>
</div>

控制器中添加处理函数 #

$scope.handleSelection = function(selectedText) {
  // 遍历你的搜索结果，找到匹配的文本对应的key（URL）
  angular.forEach($scope.suggestionResults, function(values) {
    angular.forEach(values, function(data, key) {
      if (data === selectedText) {
        // 找到对应key后，调用你的showProduct方法
        $scope.showProduct({key: key, data: data});
        return; // 匹配到就退出循环，提升效率
      }
    });
  });
};

方案二：自定义下拉菜单（更灵活的交互） #

如果你需要更丰富的交互效果（比如hover样式、点击反馈），可以放弃原生datalist，自己用Angular的ng-repeat实现一个下拉菜单，这样ng-click就能正常工作了。

修改后的HTML代码 #

<h2>Custom search field</h2>
<div id="custom-search-input">
  <div class="input-group col-md-12">
    <input type="text" class="form-control input-lg" 
           placeholder="search" ng-model="obj.searchText" 
           ng-focus="searchSuggest()" />
    <span class="input-group-btn">
      <button class="btn btn-info btn-lg" type="button" ng-click="showProduct(obj)">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </span>
  </div>
  <!-- 自定义下拉菜单，通过ng-show控制显示 -->
  <div ng-show="suggestionResults.length > 0" class="dropdown-menu">
    <div ng-repeat="values in suggestionResults track by $index"
         ng-repeat="(key,data) in values"
         ng-click="selectProduct(key, data)"
         class="dropdown-item">
      {{data}}
    </div>
  </div>
</div>

控制器中添加选择函数 #

$scope.selectProduct = function(key, data) {
  // 更新输入框的文本
  $scope.obj.searchText = data;
  // 调用你的showProduct方法传递key和data
  $scope.showProduct({key: key, data: data});
  // 选择后隐藏下拉菜单
  $scope.suggestionResults = [];
};

为什么原生datalist的ng-click不生效？ #

简单来说，浏览器原生的<datalist>是一个特殊组件，它的<option>元素并不是真正可交互的DOM节点——浏览器只会用它们来渲染下拉选项，但不会触发点击、鼠标hover等事件，所以Angular的ng-click指令根本绑定不上。监听输入框的变化是最贴合原生datalist用法的解决方案，而自定义下拉则能给你更多控制权。

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