Untuk men-trigger Jquery Autocomplete untuk menampilkan drop down list ketika cursor fokus ke textbox autocomplete sangatlah mudah. Tambahkan script .focus(function() { $(this).autocomplete("search", this.value); }); di akhir script autocomplete dan tambahkan minLength: 0 pada konfigurasi jquery autocomplete-nya. (Lihat tulisan yang berwarna biru pada contoh di bawah ini).
Berikut ini contoh penggunaannya :
<html>
<head>
<!-- Load Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Load Jquery UI-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
.ui-autocomplete {
cursor:pointer;
height:110px;
overflow-y:scroll;
}
</style>
<script>
$(document).ready(function() {
var Negara = ['ARGENTINA', 'AUSTRALIA', 'BRAZIL', 'BELARUS', 'BHUTAN', 'CHILE', 'CAMBODIA', 'CANADA', 'CHINA', 'DENMARK', 'INDONESIA'];
$('#negara').autocomplete({
source: Negara,
minLength: 0,
scroll: true
}).focus(function() {
$(this).autocomplete("search", this.value);
});
});
</script>
</head>
<body style="font-size:60%;">
<div style="font:12px">
Type Country : <input type="text" id="negara" />
</div>
</body>
</html>
Klik di sini untuk melihat demo live-nya.
<head>
<!-- Load Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Load Jquery UI-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
.ui-autocomplete {
cursor:pointer;
height:110px;
overflow-y:scroll;
}
</style>
<script>
$(document).ready(function() {
var Negara = ['ARGENTINA', 'AUSTRALIA', 'BRAZIL', 'BELARUS', 'BHUTAN', 'CHILE', 'CAMBODIA', 'CANADA', 'CHINA', 'DENMARK', 'INDONESIA'];
$('#negara').autocomplete({
source: Negara,
minLength: 0,
scroll: true
}).focus(function() {
$(this).autocomplete("search", this.value);
});
});
</script>
</head>
<body style="font-size:60%;">
<div style="font:12px">
Type Country : <input type="text" id="negara" />
</div>
</body>
</html>
Martin Tobing
I'm Martin Tobing. A full time web programmer. I enjoy to make website and web application in PHP.
Website: http://www.martintobing.com/
No Comment to " Display AutoComplete Drop down List on Focus using JQuery "
Post a Comment