求助：ui-bootstrap-tpls-1.1.2 lookahead下拉框选中后点击不展开

我之前在使用ui-bootstrap 1.x版本的typeahead组件时也碰到过一模一样的问题——选中选项后再次点击输入框，下拉菜单死活不出来，非得删个字符才行。不想清空输入框的话，可以试试这几个方案：

方案1：自定义指令强制在focus时触发查询 #

这个方法最精准，直接给输入框绑定focus事件，手动调用typeahead的查询逻辑，完全保留输入框现有内容：

首先写一个自定义指令：

angular.module('yourAppModule').directive('forceTypeaheadOnFocus', function() {
  return {
    require: ['ngModel', 'uibTypeahead'],
    link: function(scope, element, attrs, controllers) {
      var ngModelCtrl = controllers[0];
      var typeaheadCtrl = controllers[1];

      element.on('focus', function() {
        // 用当前输入框的值触发查询，这样下拉菜单就会展开
        typeaheadCtrl.search(ngModelCtrl.$viewValue);
      });

      // 记得销毁事件监听，避免内存泄漏
      scope.$on('$destroy', function() {
        element.off('focus');
      });
    }
  };
});

然后在你的模态框输入框上加上这个指令：

<input type="text" 
       uib-typeahead="option for option in yourOptionsList | filter:$viewValue"
       ng-model="selectedOption"
       force-typeahead-on-focus>

方案2：调整typeahead的minLength属性 #

ui-bootstrap的typeahead默认typeahead-min-length是1，也就是说只有输入字符长度≥1时才会触发查询。把它改成0，就能让focus时即使已有内容也触发查询：

<input type="text" 
       uib-typeahead="option for option in yourOptionsList | filter:$viewValue"
       ng-model="selectedOption"
       typeahead-min-length="0">

⚠️ 注意：这个方案会带来一个小副作用——页面加载完成后输入框首次focus时，会直接展开所有选项（因为minLength为0，空值也会触发查询）。如果不想出现这种情况，可以结合方案1的思路，只在输入框已有内容时才临时把minLength改成0，focus后再改回去，不过稍微麻烦一点。

为什么清空内容的方法没用？ #

你之前试的onclick或onfocus清空输入框，虽然能触发查询，但会丢失用户已经选中的内容，体验不好。我们上面的方法都是在保留现有内容的前提下，直接触发typeahead的查询逻辑，完美匹配你的需求。

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