Проверяйте введенные текстовые данные по списку данных по ключу вверх

Question

Я хочу повторно использовать эту функцию 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>

Answer 1

Требование

1. Если существует так много datalist, каждый из которых связан с тегом input.
2. Тогда вы можете получить id изdatalist из id тега input, передав id тега input в событие ValidateInput('#input-id') on ng-keyup.
3. После этого вы можете 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>