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

Question

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

当用户在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;
}

Answer 1

如果我理解正确：

• 并在完整的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