$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
function custom_source(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response($.grep(projects, function(value) {
return matcher.test(value.label)
|| matcher.test(value.desc);
}));
}
var auto = $( "#project" ).autocomplete({
minLength: 0,
source: custom_source, //projects o "algo.php",
// search: "desc",
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
// console.log(item);
//console.log($(this).val());
//console.log($("#project").val());
var mostrar = "<a>" + item.label + "<br>" + item.desc + "</a>";
if($("#project").val())
mostrar = __highlight(mostrar, $("#project").val());
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( mostrar )
.appendTo( ul );
};
// console.info(auto);
function __highlight(s, t) {
var matcher = new RegExp("("+$.ui.autocomplete.escapeRegex(t)+")", "ig" );
return s.replace(matcher, '<b style="color:blue">$1</b>');
}
});
Documentacion Oficial
Test Online: