Question

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

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

代码示例：

    $scope.countryList = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; 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，也可以使用style或ng-style在输入字段上应用CSS 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语句中执行所需的任何操作以获取所需的错误消息。

Answer 2

Take a look at this plunkr.

您可以使用以下类似方法检查输入的有效性，并使用ng-change

监视值

    $scope.checkInput = function(){
        $scope.validInput = $scope.countryList.indexOf($scope.country) > -1;
    }

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

2 个答案: