Recently made a project, using the automatic complementary function of jquery, but the default is only a series of data, so it is modified slightly and took it out to be ugly.

The following is the default local data:

$ (“# tags”). AutoComplete ([“C ++”, “Java”, “PHP”, “ColdFusion”, “JavaScript”], // This parameter is a data array of automatic completion, when you should Enter a character, it will display some, this static assignment // is not very good (personally).

{// The following are some display effect parameters
         width: 320,
         max: 4,
         highlight: false,
         multiple: true,
          multipleSeparator: “”,
         scroll: true,
        scrollHeight: 300
        });

The following is the call background data:

 $(“#…”).autocomplete({

       source: function(resquest,response){

           $.ajax({

URL: ‘……………. // Request address
               type: “post”,
dattype: “json”, // return type
               success: function(msg){

Response (msg); // Back to the content you need to prompt
               }
           });
       }
     });   
above is generally used.

The following is the focus of this article:

Function ExtendautoComplete () {// This is an extension function, inherited from UI.Autocomplete
    $.widget(‘custom.multipeCln’,$.ui.autocomplete,{

_Renderitem: Function (ul, it, it) {// Here rewriting the _RenderItem method of AutoComplete
            if(ul.html() == “”){

                var div = $(‘<div class=”ui-widget-header” style=”width:100%”></div>’);
                var table = $(‘<table  style=”width:100%” border=0></table>’);
                var thead = $(‘<thead  style=”width:100%”></thead>’);
                var tr = $(‘<tr style=”width:100%”></tr>’);
$ .Each (this.Options.Columns, Function (index, it) {// here traverses the title that needs to be displayed in columns.
                    tr.append(‘<td style=”padding:0 4px;float:left;width:’ + item.width + ‘px;”>’ + item.name + ‘</td>’);
                });
                thead.append(tr);
                table.append(thead);
                div.append(table);
                ul.append(div);
            }
            var t = ”;
             t =  ‘<span  style=”width:100%”>’;
             t += ‘<table  style=”width:100%” border=0>’;
            t += ‘<tr style=”width:100%”>’;
            
$ .Each (this.Options.Columns, Function (index, column) {// traversed displayed value
                t += ‘<td style=”padding:0 4px;float:left;width:’ + column.width + ‘px;”>’ + item[column.name.toLowerCase()] + ‘</td>’;
           });
           t += “</tr></table></span>”;
            
            return $( “<li>” ).append( $( “<a  class=’mcacAnchor’>” ).html( t ) ).appendTo( ul );
        }
    });
}

Below is using this extension

$(function(){

    var data=[{‘model’:’1221′,’manufacturer’:’HTML’},{‘model’:’1221′,’manufacturer’:’HTML’},{‘model’:’3221′,’manufacturer’:’HTML212′},{‘model’:’789221′,’manufacturer’:’HTML343′}];
    extendAutocomplete();
    $(‘#auto’).multipeCln({

        showHeader : true,
Columns: [{name: ‘model’, width: 200}, {name: ‘manuoFacturer’, width: 200}], // Set the title of the displayed column
Select: Function (Event, UI) {// Operation here, click the data in the prompt box, display the style in the text box
    
            this.value = ui.item.model + (ui.item.manufacturer ? ‘/’ + ui.item.manufacturer : ”);
            return false;
        },
        source:function(request,response)
            {    
                response(data);
             }
    });
    });

display renderings:

I hope it will help everyone. For the first time, please mention more about writing articles.