根据数据列表验证输入文本数据答案

【问题标题】：Validate the input text data against the data list on key up根据数据列表验证输入文本数据
【发布时间】：2019-01-23 05:28:50
【问题描述】：

我想重新使用这个ValidateInput() 函数，因为我的代码中的数据列表有更多这样的输入。

下面是代码。

<input id="input-id" list="datalist-id" type="text" placeholder="Select Cluster Group" ng-keyup="ValidateInput()" autocomplete="off" />
<datalist id="datalist-id">
    <div ng-repeat="country in Countries">
        <option> {{country.name}} </option>
    </div>
</datalist>

【问题讨论】：

标签： javascript jquery angularjs html

【解决方案1】：

要求

如果有这么多datalist，每个都与input标签相关联。
然后，您可以通过将input 标记的id 传递给ng-keyup 事件上的ValidateInput('#input-id')，从input 标记的id 中获取datalist 的datalist。
之后，您可以validate 将input 文本中提供的数据与datalist 对比。

代码

//Method to valdate the input against the datalist items.
var myApp = angular.module("my-app", []);

myApp.controller("myController", function($scope) {
$scope.Countries = [{name: "Nepal"}, {name: "India"}, {name: "China"}, {name: "Pakistan"}];

$scope.ValidateInput = function (InputId) {
	var listId = '#' + $(InputId).attr('list');

	$(InputId).removeAttr('style');

	$(listId).each(function () {
		if (!$(InputId).val() || !$(this).text().toLowerCase().includes($(InputId).val().toLowerCase())) {
			$(InputId).css('border', '3px solid red');
			return false;
		}
	});
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="my-app" ng-controller="myController">
<input id="input-id" list="datalist-id" type="text" placeholder="Select Country" ng-keyup="ValidateInput('#input-id')" autocomplete="off" />
<datalist id="datalist-id">
    <div ng-repeat="country in Countries">
        <option> {{country.name}} </option>
    </div>
</datalist>
</div>

【讨论】：