Come posso formattare in modo personalizzato i risultati del plug-in di completamento automatico?

Sto usando 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 digito "foo", visualizzerò " foo bar" nel menu a discesa, in questo modo:

Sì, è possibile se si completa automaticamente la 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 quel _renderItem fn con la tua creazione che produce l'effetto desiderato. Questa tecnica, che ridefinisce una funzione interna in una libreria, che ho imparato a conoscere, si chiama patch-monkey . 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 dentro $(document).ready(...).

Ora, questo è un trucco, perché:

• c'è un oggetto regexp creato per ogni elemento visualizzato nell'elenco. Quel regexp obj dovrebbe essere riutilizzato per tutti gli oggetti.

• non esiste una classe CSS utilizzata per la formattazione della parte completata. È uno stile in linea.
  Ciò significa che se avessi più completamenti automatici nella stessa pagina, otterrebbero tutti lo stesso trattamento. Uno stile CSS risolverebbe questo.

... 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, a partire dal codice originale sopra, devi solo sostituirlo this.termcon "$&".

MODIFICA
Quanto sopra cambia ogni widget di completamento automatico sulla pagina. Se vuoi cambiarne solo una, vedi questa domanda:
Come patchare * solo * un'istanza di Completamento automatico su una pagina?

questo funziona anche:

       $.ui.autocomplete.prototype._renderItem = function (ul, item) {
            item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
            return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
        };

una combinazione delle risposte di @ Jörn Zaefferer e @ Cheeso.

Super utile. Grazie. +1.

Ecco una versione leggera che ordina su "String 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();

Ecco un esempio completo funzionale:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Autocomplete - jQuery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <label for="search"></label>
  <input type="text" name="search" id="search" />
</form>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$(function(){

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    item.label = item.label.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
};


var availableTags = [
    "JavaScript",
    "ActionScript",
    "C++",
    "Delphi",
    "Cobol",
    "Java",
    "Ruby",
    "Python",
    "Perl",
    "Groove",
    "Lisp",
    "Pascal",
    "Assembly",
    "Cliper",
];

$('#search').autocomplete({
    source: availableTags,
    minLength: 3
});


});
</script>
</body>
</html>

Spero che questo ti aiuti

jQueryUI 1.9.0 modifica il funzionamento di _renderItem.

Il codice qui sotto prende in considerazione questa modifica e mostra anche come stavo facendo la corrispondenza evidenziata usando il plugin di completamento automatico jQuery di Jörn Zaefferer. Evidenzierà tutti i singoli termini nel termine di ricerca generale.

Da quando ho iniziato a usare Knockout e jqAuto ho scoperto che questo è un modo molto più semplice di definire i 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();
});

per un modo ancora più semplice, prova questo:

$('ul: li: a[class=ui-corner-all]').each (function (){      
 //grab each text value 
 var text1 = $(this).text();     
 //grab user input from the search box
 var val = $('#s').val()
     //convert 
 re = new RegExp(val, "ig") 
 //match with the converted value
 matchNew = text1.match(re);
 //Find the reg expression, replace it with blue coloring/
 text = text1.replace(matchNew, ("<span style='font-weight:bold;color:green;'>")  + matchNew +    ("</span>"));

    $(this).html(text)
});
  }

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

• Ricerca senza distinzione tra maiuscole e minuscole
• 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);
};

Ecco una versione che non richiede espressioni regolari e corrisponde a più risultati nell'etichetta.

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
            var highlighted = item.label.split(this.term).join('<strong>' + this.term +  '</strong>');
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + highlighted + "</a>")
                .appendTo(ul);
};

Dai un'occhiata alla demo di combobox, che include l'evidenziazione dei risultati: http://jqueryui.com/demos/autocomplete/#combobox

La regex in uso lì si occupa anche dei risultati html.

Ecco la mia versione:

• Utilizza le funzioni DOM anziché RegEx per interrompere le stringhe / iniettare i tag di span
• È interessato solo il completamento automatico specificato, non tutti
• Funziona con l'interfaccia utente versione 1.9.x

function highlightText(text, $node) {
    var searchText = $.trim(text).toLowerCase(),
        currentNode = $node.get(0).firstChild,
        matchIndex,
        newTextNode,
        newSpanNode;
    while ((matchIndex = currentNode.data.toLowerCase().indexOf(searchText)) >= 0) {
        newTextNode = currentNode.splitText(matchIndex);
        currentNode = newTextNode.splitText(searchText.length);
        newSpanNode = document.createElement("span");
        newSpanNode.className = "highlight";
        currentNode.parentNode.insertBefore(newSpanNode, currentNode);
        newSpanNode.appendChild(newTextNode);
    }
}
$("#autocomplete").autocomplete({
    source: data
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    var $a = $("<a></a>").text(item.label);
    highlightText(this.term, $a);
    return $("<li></li>").append($a).appendTo(ul);
};

Evidenzia l'esempio di testo corrispondente

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 widget personalizzati che possono sovrascrivere _renderItemsenza sovrascrivere il _renderItemprototipo di 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 luoghi diversi con una vista diversa del completamento automatico e non si desidera violare il codice.

Se invece utilizzi il plug-in di terze parti, ha un'opzione di evidenziazione: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

(vedi la scheda Opzioni)

Per supportare più valori, basta semplicemente aggiungere 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>");