Multiple jquery autocomplete : example of multiple jquery autocomplete and also when select any element or hover on list description of hovered element will show and when we select the element its value will shown in lebel.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple JQuery Autocomplete with selector</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var projects = [
{
value: "java",
label: "Java",
desc: "write once run anywhere",
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
},
{
value: "Bootstrap",
label: "Twitter Bootstrap",
desc: "popular front end frameworks ",
}
];
$("[id^=autocomplete_]").autocomplete({
source: projects,
focus: function( event, ui ) {
var idArr=$(this).attr('id').split('_');
$('#value_'+idArr[1]).text(ui.item.desc);
return false;
},
select: function( event, ui ) {
var idArr=$(this).attr('id').split('_');
$('#value_'+idArr[1]).text(ui.item.value);
return false;
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class="ui-widget">
<p>Type J OR b</p>
<input id="autocomplete_1"><label id="value_1"></label><br>
<input id="autocomplete_2"><label id="value_2"></label><br>
<input id="autocomplete_3"><label id="value_3"></label><br>
<input id="autocomplete_4"><label id="value_4"></label><br>
<input id="autocomplete_5"><label id="value_5"></label><br
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multiple JQuery Autocomplete with selector</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var projects = [
{
value: "java",
label: "Java",
desc: "write once run anywhere",
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
},
{
value: "Bootstrap",
label: "Twitter Bootstrap",
desc: "popular front end frameworks ",
}
];
$("[id^=autocomplete_]").autocomplete({
source: projects,
focus: function( event, ui ) {
var idArr=$(this).attr('id').split('_');
$('#value_'+idArr[1]).text(ui.item.desc);
return false;
},
select: function( event, ui ) {
var idArr=$(this).attr('id').split('_');
$('#value_'+idArr[1]).text(ui.item.value);
return false;
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class="ui-widget">
<p>Type J OR b</p>
<input id="autocomplete_1"><label id="value_1"></label><br>
<input id="autocomplete_2"><label id="value_2"></label><br>
<input id="autocomplete_3"><label id="value_3"></label><br>
<input id="autocomplete_4"><label id="value_4"></label><br>
<input id="autocomplete_5"><label id="value_5"></label><br
</div>
</body>
</html>
No comments:
Post a Comment