jquery.autocomplete expansion function: Multi -row automatic prompt CCALLEN


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:


       source: function(resquest,response){


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

_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>’);
            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


    var data=[{‘model’:’1221′,’manufacturer’:’HTML’},{‘model’:’1221′,’manufacturer’:’HTML’},{‘model’:’3221′,’manufacturer’:’HTML212′},{‘model’:’789221′,’manufacturer’:’HTML343′}];

        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;

display renderings:

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


Random Posts

python reptile-crawling Douban reading —- content data D

leetcode: rotate-list: rotating linked list qiana

At the end of 2010

python input stream output stream directional direction

Modify Ueditor143 editor JSP version to upload pictures to support watermark watermark