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

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

如果我理解正确的话:

• 并在complete 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