javascript jquery - Come posso personalizzare i risultati del plug-in di completamento automatico?




7 Answers

Sì, è possibile se si esegue il completamento automatico della patch di scimmia.

Nel widget di completamento automatico incluso in v1.8rc3 dell'interfaccia utente di jQuery, il popup di suggerimenti viene creato nella funzione _renderMenu del widget di completamento automatico. Questa funzione è definita in questo modo:

_renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        self._renderItem( ul, item );
    });
},

La funzione _renderItem è definita in questo modo:

_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
},

Quindi quello che devi fare è sostituire _renderItem fn con la tua creazione che produce l'effetto desiderato. Questa tecnica, che ridefinisce una funzione interna in una libreria, che ho imparato è chiamata monkey-patching . Ecco come l'ho fatto:

  function monkeyPatchAutocomplete() {

      // don't really need this, but in case I did, I could store it and chain
      var oldFn = $.ui.autocomplete.prototype._renderItem;

      $.ui.autocomplete.prototype._renderItem = function( ul, item) {
          var re = new RegExp("^" + this.term) ;
          var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
                  this.term + 
                  "</span>");
          return $( "<li></li>" )
              .data( "item.autocomplete", item )
              .append( "<a>" + t + "</a>" )
              .appendTo( ul );
      };
  }

Chiama quella funzione una volta in $(document).ready(...) .

Ora, questo è un trucco, perché:

  • c'è un obge regexp creato per ogni oggetto visualizzato nell'elenco. Quella obge rexxp dovrebbe essere riutilizzata per tutti gli elementi.

  • non esiste una classe CSS utilizzata per la formattazione della parte completata. È uno stile in linea.
    Ciò significa che se avessi più autocompleti sulla stessa pagina, riceverebbero lo stesso trattamento. Uno stile CSS lo risolverebbe.

... ma illustra la tecnica principale e funziona per i tuoi requisiti di base.

esempio di lavoro aggiornato: http://output.jsbin.com/qixaxinuhe

Per preservare il caso delle stringhe di corrispondenza, anziché utilizzare il caso dei caratteri digitati, utilizzare questa riga:

var t = item.label.replace(re,"<span style='font-weight:bold;color:Blue;'>" + 
          "$&" + 
          "</span>");

In altre parole, partendo dal codice originale sopra, è sufficiente sostituire this.term con "$&" .

MODIFICARE
Quanto sopra cambia ogni widget di completamento automatico sulla pagina. Se vuoi cambiarne solo uno, vedi questa domanda:
Come patch * solo una * istanza di completamento automatico su una pagina?

ui autocomplete

Sto utilizzando il plug-in di completamento automatico dell'interfaccia utente jQuery . C'è un modo per evidenziare la sequenza di caratteri di ricerca nei risultati a discesa?

Ad esempio, se ho "foo bar" come dati e scrivo "foo", otterrò " foo bar" nel menu a discesa, in questo modo:




Super utile. Grazie. +1.

Ecco una versione leggera che ordina su "La stringa deve iniziare con il termine":

function hackAutocomplete(){

    $.extend($.ui.autocomplete, {
        filter: function(array, term){
            var matcher = new RegExp("^" + term, "i");

            return $.grep(array, function(value){
                return matcher.test(value.label || value.value || value);
            });
        }
    });
}

hackAutocomplete();



jQueryUI 1.9.0 cambia il modo in cui _renderItem funziona.

Il codice qui sotto tiene in considerazione questo cambiamento e mostra anche come stavo facendo l'abbinamento delle alte luci usando il plugin di completamento automatico jQuery di Jörn Zaefferer. Evidenzierà tutti i singoli termini nel termine di ricerca complessivo.

Da quando mi sono trasferito a usare Knockout e jqAuto ho trovato questo un modo molto più semplice per lo styling dei risultati.

function monkeyPatchAutocomplete() {
   $.ui.autocomplete.prototype._renderItem = function (ul, item) {

      // Escape any regex syntax inside this.term
      var cleanTerm = this.term.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');

      // Build pipe separated string of terms to highlight
      var keywords = $.trim(cleanTerm).replace('  ', ' ').split(' ').join('|');

      // Get the new label text to use with matched terms wrapped
      // in a span tag with a class to do the highlighting
      var re = new RegExp("(" + keywords + ")", "gi");
      var output = item.label.replace(re,  
         '<span class="ui-menu-item-highlight">$1</span>');

      return $("<li>")
         .append($("<a>").html(output))
         .appendTo(ul);
   };
};

$(function () {
   monkeyPatchAutocomplete();
});



Ecco un ripasso della soluzione di Ted de Koning. Include :

  • Ricerca non sensibile al maiuscolo / minuscolo
  • Trovare molte occorrenze della stringa cercata
$.ui.autocomplete.prototype._renderItem = function (ul, item) {

    var sNeedle     = item.label;
    var iTermLength = this.term.length; 
    var tStrPos     = new Array();      //Positions of this.term in string
    var iPointer    = 0;
    var sOutput     = '';

    //Change style here
    var sPrefix     = '<strong style="color:#3399FF">';
    var sSuffix     = '</strong>';

    //Find all occurences positions
    tTemp = item.label.toLowerCase().split(this.term.toLowerCase());
    var CharCount = 0;
    tTemp[-1] = '';
    for(i=0;i<tTemp.length;i++){
        CharCount += tTemp[i-1].length;
        tStrPos[i] = CharCount + (i * iTermLength) + tTemp[i].length
    }

    //Apply style
    i=0;
    if(tStrPos.length > 0){
        while(iPointer < sNeedle.length){
            if(i<=tStrPos.length){
                //Needle
                if(iPointer == tStrPos[i]){
                    sOutput += sPrefix + sNeedle.substring(iPointer, iPointer + iTermLength) + sSuffix;
                    iPointer += iTermLength;
                    i++;
                }
                else{
                    sOutput += sNeedle.substring(iPointer, tStrPos[i]);
                    iPointer = tStrPos[i];
                }
            }
        }
    }


    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + sOutput + "</a>")
        .appendTo(ul);
};






puoi usare il seguente codice:

lib:

$.widget("custom.highlightedautocomplete", $.ui.autocomplete, {
    _renderItem: function (ul, item) {
        var $li = $.ui.autocomplete.prototype._renderItem.call(this,ul,item);
        //any manipulation with li
        return $li;
    }
});

e logica:

$('selector').highlightedautocomplete({...});

crea un widget personalizzato che può sovrascrivere _renderItem senza sovrascrivere _renderItem del prototipo del plug-in originale.

nel mio esempio ho anche usato la funzione di rendering originale per semplificare il codice

è importante se si desidera utilizzare il plug-in in diversi punti con una diversa visualizzazione del completamento automatico e non si desidera interrompere il codice.




Per supportare più valori, è sufficiente aggiungere semplicemente la seguente funzione:

function getLastTerm( term ) {
  return split( term ).pop();
}

var t = String(item.value).replace(new RegExp(getLastTerm(this.term), "gi"), "<span class='ui-state-highlight'>$&</span>");



Related

javascript jquery jquery-ui jquery-ui-autocomplete