Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Customized jQuery UI Autocomplete Widget: List Items with description
$("#tags").autocomplete({
source : availableTags,
select : function(event, ui) {
itemTitleDesc = split(ui.item.value);
if (is_array(itemTitleDesc)) {
itemTitle = itemTitleDesc[0];
if (itemTitleDesc.length > 1) {
itemDesc = itemTitleDesc[1];
itemDesc = itemDesc.replace(")", "");
}
ui.item.value = itemTitle;
}
}
}).data("autocomplete")._renderItem = function(ul, item) {
itemTitleDesc = split(item.value);
var desc = "";
if (is_array(itemTitleDesc)) {
itemTitle = itemTitleDesc[0];
if (itemTitleDesc.length > 1) {
itemDesc = itemTitleDesc[1];
itemDesc = itemDesc.replace(")", "");
desc = '<br/><span><small>' + itemDesc +
'</small></span>';
}
var itemContent = '<span><strong>' + itemTitle +
'</strong></span>' + desc;
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(itemContent))
.appendTo(ul);
} else {
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(item.label))
.appendTo(ul);
}
};
});
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags
});
});
function is_array(input) {
$ret = typeof (input) == 'object' && (input instanceof Array);
return $ret;
}
function split(val) {
return val.split("(");
};
/*
* jquery.ui.autocomplete.js
* Line Number: 449
*
*/
_renderItem: function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").text(item.label))
.appendTo(ul);
}
_renderItem = function (ul, item) {
itemTitleDesc = split(item.value);
var desc = "";
if (is_array(itemTitleDesc)) {
itemTitle = itemTitleDesc[0];
if (itemTitleDesc.length > 1) {
itemDesc = itemTitleDesc[1];
itemDesc = itemDesc.replace(")", "");
desc = '<br/><span><small>' + itemDesc + '</small></span>';
}
var itemContent = '<span><strong>' + itemTitle
+ '</strong></span>' + desc;
return $("<li></li>").data("item.autocomplete", item).append(
$("<a></a>").html(itemContent)).appendTo(ul);
} else {
return $("<li></li>").data("item.autocomplete", item).append(
$("<a></a>").html(item.label)).appendTo(ul);
}
};
select : function (event, ui) {
itemTitleDesc = split(ui.item.value);
if (is_array(itemTitleDesc)) {
itemTitle = itemTitleDesc[0];
if (itemTitleDesc.length > 1) {
itemDesc = itemTitleDesc[1];
itemDesc = itemDesc.replace(")", "");
}
ui.item.value = itemTitle;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment