jueves, 12 de julio de 2012

jQuery: Autocomplete con resaltdo, tpl y subserach

$(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