javascript - 限制用户输入新名称并仅允许从现有列表中进行选择

Question

我正在研究 angularjs 的自动完成文本框功能。我希望用户只从现有的自动完成列表中选择名称，而不是输入新名称。例如，当用户输入'Al'时，自动完成列表会显示匹配列表，用户可以从现有列表中选择一个名称，而不用输入新名称。如何限制用户提交新名称不存在于现有列表中。

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

代码示例:

    $scope.countryList = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei"];
$scope.validateField = function(){
  alert("Clicked on submit , validte field");
}
    $scope.complete=function(string){

        var output=[];
        angular.forEach($scope.countryList,function(country){
            if(country.toLowerCase().indexOf(string.toLowerCase())>=0){
                output.push(country);
            }
        });
        $scope.filterCountry=output;
    }
    $scope.fillTextbox=function(string){
        $scope.country=string;
        $scope.filterCountry=null;
    } 

任何输入都会有帮助。

Answer 1

您可以禁用提交按钮，并突出显示输入字段的边框红色，告诉用户从下拉列表中选择名称。

首先，您需要更新您的 complete() 函数。使用 else if 语句检查该值是否来自列表，如果不是，那么您可以在该 else if 语句中实现所需的逻辑。

此方法灵活且易于自定义错误生成消息。您可以显示和隐藏有错误消息的 div，或者您可以使用 ng-style 或 在输入字段上应用 css style >ng-class。现在我将向您展示如何禁用或启用按钮。这是更新后的代码片段:

 $scope.complete = function(string) {

    var output = [];
    angular.forEach($scope.countryList, function(country) {
      if (country.toLowerCase().indexOf(string.toLowerCase()) >= 0) {
        output.push(country);
        $scope.enableDisable = false;
      } else if (country.toLowerCase().indexOf(string.toLowerCase()) < 0) {
        $scope.enableDisable = true;
      }
    });

    $scope.filterCountry = output;
  }

在 html 部分中，您只需添加 ng-disabled 属性并设置其值。

 <input type="submit" value="submit" ng-disabled="enableDisable" ng-click="validateField()">

因此，您可以在 else if 语句中执行任何操作来获取所需的错误消息。