$(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:
No hay comentarios:
Publicar un comentario