<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">
</script>
<link type="text/css" rel="Stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
$(function () {
var availableItems = [{
value: "recent",
label: "Recent",
classN: "heading"
}, {
value: "all",
label: "All",
classN: "all"
}, {
value: "lorem",
label: "Lorem",
classN: "lorem"
}, ];
$(".post-to").autocomplete({
source: availableItems,
minLength: 0,
focus: function (event, ui) {
$('.post-to').val(ui.item.label);
alert(ui.item.label);
return false;
},
select: function (event, ui) {
alert(ui.item.label);
return false;
}
}).on("focus", function () {
$(this).autocomplete("search", '');
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
//instead of <span> use <a>
.append("<a class='" + item.classN + "'></a><a>" + item.label + "</a>")
.appendTo(ul);
};
});
</script>
Sunday, October 13, 2013
autocomplete jquery with select event
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment