无法从自动完成列表中选择名称

时间:2018-08-24 14:24:44

标签: css angularjs twitter-bootstrap

我正在显示文本框的自动完成列表。

当用户在textbox中键入一些字符时,它会显示自动完成列表,用户可以从中选择名称,但是如果用户不想从自动完成列表中选择任何名称并在列表外部单击,自动完成列表 消失,代码如下:

#country1:not(:focus)+.list-group {
  display: none;
}

但是我的工作功能已损坏,并且不允许在任何文本框中的自动完成列表中选择名称。

演示:http://plnkr.co/edit/y4UNoYtuJFYhjpN0mtWS?p=preview

CSS:

#country1:not(:focus)+.list-group {
  display: none;
}

#country2:not(:focus)+.list-group {
  display: none;
}

#country3:not(:focus)+.list-group {
  display: none;
}

1 个答案:

答案 0 :(得分:0)

如果我理解正确:

  • 然后将完整的method()添加到列表中
  • 使用ng-mousedown而不是ng-click(使单击在失去焦点之前执行)

     $scope.complete = function (string, labelSel) {
            var output = [];
    
            if(string !== "")
              output.push(string); // push your string at first 
    
            angular.forEach($scope.countryList, function (country) {
                if (country.toLowerCase().indexOf(string.toLowerCase()) >= 0) {
                    output.push(country);
                }
            });
            //... etc
      }
    

http://next.plnkr.co/edit/rlYx5oXTqbfBloid5Jue?p=preview