Cara Membuat Autocomplete Dengan AngularJS

Pada kesempatan kali ini saya akan membahas tentang bagaimana cara membuat autocomplete dengan AngularJS. Yang dimaksud autocomplete sendiri merupakan dimana textbox yang nantinya saat ada inputan dari user maka akan muncul sejumlah data yang dicari, dengan maskud adalah menampilkan perkiraan kata yang dimasukkan tanpa memasukan secara keseluruhnya.

Langkah pertama dalam cara membuat autocomplete dengan AngularJS, yaitu sahabat bisa siapkan struktur HTMLnya seperti script berikut:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Membuat Autocomplete dengan AngularJS</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
</head>
<body>
	<div class="container mt-5 bg-warning">
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8 my-5 text-primary">
				<h3 align="center">Membuat Autocomplete dengan AngularJS</h3>
				<div ng-app="myapp" ng-controller="usercontroller">
					<label for="">Masukan Kota Anda</label>
					<input type="text" name="kota" id="kota" ng-model="kota" ng-keyup="complete(kota)" class="form-control" />
					<ul class="list-group" ng-model="hidethis" ng-hide="hidethis">
						<li class="list-group-item" ng-repeat="datakota in filterkota" ng-click="fillTextbox(datakota)">{{datakota}}</li>
					</ul>
				</div>
			</div>
			<div class="col-md-2"></div>
		</div>
	</div>
	

</body>
</html>

<!DOCTYPE html>

<head>

<title>Cara Membuat Autocomplete dengan AngularJS</title>

</head>

<body>

<h3 align="center">Membuat Autocomplete dengan AngularJS</h3>

<label for="">Masukan Kota Anda</label>

<li class="list-group-item" ng-repeat="datakota in filterkota" ng-click="fillTextbox(datakota)">{{datakota}}</li>

</ul>

</div>

</div>

</body>

</html>

Pada script diatas saya menggunakan library CDN Bootstrap dan AngularJS.

Disini saya memakai col-md-8 untuk menampilkan contennya, didalamnya menggunakan ng-model untuk memasukan teks , lalu menggunakan tag html <ul> untuk menampung data yang tersimpan dengan menggunakan fungsi ng-model dengan value hidden. serta tag <li> untuk mencetak dengan expression {{}}.

Dan terakhir membuat variabel $scope didalam controllernya dimana ada data dalam array yagn berisikan nama kota, dimana saat kita memasukan nama kota maka akan muncul dan terfilter sesuai kata yang diketikan tanpa harus diketikan secara keseluruhan.

	<script>
		var app = angular.module("myapp",[]);
		app.controller("usercontroller", function($scope){
			$scope.Listkota = [ "Jakarta Barat", "Jakarta Pusat", "Jakarta Selatan", "Jakarta Utara", "Jakarta Timur", "Kep. Seribu", "Bandung", "Yogyakarta"
			];
			$scope.complete = function(string){
				var output = [];
				angular.forEach($scope.Listkota, function(kota){
					if(kota.toLowerCase().indexOf(string.toLowerCase()) >=0)
					{
						output.push(kota);
					}
				});
				$scope.filterkota = output;
			}
			$scope.fillTextbox = function(sting){
				$scope.kota = sting;
				$scope.hidethis = true;
			}
		});
	</script>

var app = angular.module("myapp",[]);

app.controller("usercontroller", function($scope){

$scope.Listkota = [ "Jakarta Barat", "Jakarta Pusat", "Jakarta Selatan", "Jakarta Utara", "Jakarta Timur", "Kep. Seribu", "Bandung", "Yogyakarta"

];

$scope.complete = function(string){

var output = [];

angular.forEach($scope.Listkota, function(kota){

if(kota.toLowerCase().indexOf(string.toLowerCase()) >=0)

{

output.push(kota);

}

});

$scope.filterkota = output;

}

$scope.fillTextbox = function(sting){

$scope.kota = sting;

$scope.hidethis = true;

}

});

</script>

JIka sahabat jalankan pada browser dan mengetikan beberapa huruf maka akan seperti dibawah ni tampilannya:

Demikian pembahasan artikel kali ini tentang cara membuat autocomplete dengan AngularJS semoga bermanfaat dan menambah ilmu serta pengetahuan sahabat.

Selamat mencoba sampai jumpa kembali dengan pembahasan lainnya.terima kasih.

Facebook DUMET School

Categories