2012-08-09 16 views
5

Ich habe eine Autovervollständigung mit jquery-ui implementiert. Ich möchte die Anzahl der angezeigten Elemente auf 10 und jedes benutzerdefinierte Element beschränken. Hier ist der Codejquery-ui-autocomplete - Überschreiben _renderMenu und _renderItem

$("#text1").autocomplete({ 
    minLength: 2, 
    source: function (request, response) { 
    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i") 
    , results = []; 
    $.each(source, function (i, value) { 
    if (matcher.test(value.value) && $.inArray(value.label, results) < 0) { 
    results.push(value.label); 
    } 
    }); 

    response(results); 
    } 
}).data("autocomplete") 
     ._renderMenu = function(ul, items) { 
     var self = this; 
     $.each(items, function (index, item) { 
      if (index < 10) { 
       $.ui.autocomplete.prototype._renderItem = function(ul, item) { 
       var re = new RegExp("^" + this.term, "i"); 
       var t = item.label.replace(re, "<span style='font-weight:bold;color: Blue;'>" + "$&" + "</span>"); 
       var listItem = $("<li></li>") 
           .data("item.autocomplete", item) 
           .append("<a>" + t + "</a>") 
           .appendTo(ul); 
       return listItem; 

       } 
      } 
      }); 
     }; 

Dies scheint nicht zu funktionieren, da es kein Ergebnis wirft. Irgendwelche Hilfe diesbezüglich?

Antwort

5

Ich fand es heraus. Scheint, dass ich sowohl _renderMenu als auch _renderItem überschreiben muss. Es funktioniert jetzt.

+0

Hallo Anit, ich habe ein ähnliches Problem. Gibt es eine Chance, den Arbeitscode zu veröffentlichen? –

+1

@ Rote-Bete-Rote Bete Sie haben _renderMenu und _renderItem überschrieben. Der Code wurde tief gegraben. Aber hier ist die Referenz, die Sie in http://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results sehen können –

+1

@Akit, danke für Deine schnelle Antwort. In der Zwischenzeit habe ich ein Ergebnis erhalten, indem ich '._renderItemData' von' ._renderMenu' aufgerufen habe, um das Standardverhalten des Plugins zu reproduzieren. Dies ist in meinem Fall sinnvoll, da ich Standardmenüpunkte aber mit Trennzeichen haben möchte, um das Menü in Abschnitte aufzuteilen. Danke noch einmal. –

Verwandte Themen