Autocomplete
https://jqueryui.com/autocomplete/#custom-dataแนะนำการใช้งาน Autocomplete โดยการค้นหาจากตัวแปร Array ใน JavaScript ที่สร้างไว้ โดยใช้ jQuery UI ในการแสดงผล
[jQuery Code]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var projects = [
{
value: ":-)",
label: "ยิ้ม"
},
{
value: ":- (",
label: "หน้าบึ้ง เศร้า สงสารหรือเห็นอกเห็นใจ"
},
{
value: " :-/",
label: "ไม่ค่อยพอใจหรือตัดสินใจไม่ได้"
},
{
value : "(^_^)",
label : "ยิ้ม"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.value );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.value );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.label );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<div>" + item.value + "<br>" + item.label + "</div>" )
.appendTo( ul );
};
} );
</script>
</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
</body>
</html>
