ini adalah tutorial membuat autocomplete dengan jquery, berikut langkah pertama untuk membuatnya.
- Bikin sebuah folder autocomplete.
- Download Script Jquerynya di sini --link--
- Download Script Jquery Ui Auto Complete disini --link--
- Download Script jquery.select-to-autocomplete.js dan jquery.select-to-autocomplete.min.js
- Baru kita buat file index.html atau terserah ente aja lah.
and then nih script htmlnya, diperhatikan baik-baik ya gan.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Select to Autocomplete</title>
<script src="jquery.js"></script>
<script src="jquery-ui-autocomplete.js"></script>
<script src="jquery.select-to-autocomplete.min.js"></script>
<script type="text/javascript" charset="utf-8">
(function($){
$(function(){
$('select').selectToAutocomplete();
$('form').submit(function(){
alert( $(this).serialize() );
return false;
});
});
})(jQuery);
</script>
<style type="text/css" media="screen">
body {
font-family: Arial, Verdana, sans-serif;
font-size: 13px;
}
.ui-autocomplete {
padding: 0;
list-style: none;
background-color: #fff;
width: 218px;
border: 1px solid #B0BECA;
max-height: 350px;
overflow-y: scroll;
}
.ui-autocomplete .ui-menu-item a {
border-top: 1px solid #B0BECA;
display: block;
padding: 4px 6px;
color: #353D44;
cursor: pointer;
}
.ui-autocomplete .ui-menu-item:first-child a {
border-top: none;
}
.ui-autocomplete .ui-menu-item a.ui-state-hover {
background-color: #D5E5F4;
color: #161A1C;
}
</style>
</head>
<body>
<form>
<select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="" selected="selected">Select Name</option>
<option value="1">Andri</option>
<option value="2">Faisyal</option>
<option value="3">Syahrial</option>
<option value="4">Nanang</option>
<option value="5">Beni</option>
<option value="6">Rusdi</option>
<option value="7">Charlie</option>
<option value="8">Deni</option>
<option value="9">Endar</option>
<option value="10">Fajar</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html> - pastikan semua file tersebut didalam satu folder.
nih hasilnya gan , masuk ke link sini aja --DEMO--
download yang sudah saya kumpulkan dalam satu folder, ini linknya.
copyright 2014
