Wie kann ich die Ergebnisse des Autocomplete-Plug-Ins individuell formatieren?

Ich verwende das Autocomplete-Plug-In für die jQuery-Benutzeroberfläche . Gibt es eine Möglichkeit, die Suchzeichenfolge in Dropdown-Ergebnissen hervorzuheben?

Wenn ich beispielsweise "foo bar" als Daten habe und "foo" eingebe , wird in der Dropdown- Liste "foo bar" wie folgt angezeigt :

Ja, Sie können, wenn Sie Affen-Patch automatisch vervollständigen.

In dem in v1.8rc3 der jQuery-Benutzeroberfläche enthaltenen Widget für die automatische Vervollständigung wird das Popup mit Vorschlägen in der Funktion _renderMenu des Widgets für die automatische Vervollständigung erstellt. Diese Funktion ist wie folgt definiert:

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

Die Funktion _renderItem ist wie folgt definiert:

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

Sie müssen also das _renderItem fn durch Ihre eigene Kreation ersetzen, die den gewünschten Effekt erzeugt. Diese Technik, die eine interne Funktion in einer Bibliothek neu definiert, wird als Affen-Patching bezeichnet . So habe ich es gemacht:

  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 );
      };
  }

Rufen Sie diese Funktion einmal auf $(document).ready(...).

Nun, das ist ein Hack, weil:

• Für jedes in der Liste gerenderte Element wird ein reguläres Ausdrucksobjekt erstellt. Dieses reguläre Ausdrucksobjekt sollte für alle Elemente wiederverwendet werden.

• Für die Formatierung des fertigen Teils wird keine CSS-Klasse verwendet. Es ist ein Inline-Stil.
  Das heißt, wenn Sie mehrere Autovervollständigungen auf derselben Seite hätten, würden alle die gleiche Behandlung erhalten. Ein CSS-Stil würde das lösen.

... aber es veranschaulicht die Haupttechnik und funktioniert für Ihre Grundanforderungen.

aktualisiertes Arbeitsbeispiel: http://output.jsbin.com/qixaxinuhe

Verwenden Sie diese Zeile, um die Groß- und Kleinschreibung der Übereinstimmungszeichenfolgen beizubehalten, anstatt die Groß- und Kleinschreibung der eingegebenen Zeichen zu verwenden:

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

Mit anderen Worten, von dem ursprünglichen Startcode oben, müssen Sie nur zu ersetzen , this.termmit "$&".

BEARBEITEN
Das Obige ändert jedes Autocomplete-Widget auf der Seite. Wenn Sie nur eine ändern möchten, lesen Sie die folgende Frage:
Wie kann * nur eine * Instanz von Autocomplete auf einer Seite gepatcht werden?

das funktioniert auch:

       $.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);
        };

eine Kombination aus den Antworten von @ Jörn Zaefferer und @ Cheeso.

Super hilfreich. Danke dir. +1.

Hier ist eine Light-Version, die nach "String muss mit dem Begriff beginnen" sortiert wird:

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();

Hier geht es, ein funktionales vollständiges Beispiel:

<!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>

Hoffe das hilft

jQueryUI 1.9.0 ändert die Funktionsweise von _renderItem.

Der folgende Code berücksichtigt diese Änderung und zeigt auch, wie ich den Highlight-Abgleich mit dem jQuery Autocomplete-Plugin von Jörn Zaefferer durchgeführt habe. Es werden alle einzelnen Begriffe im gesamten Suchbegriff hervorgehoben.

Seit ich Knockout und jqAuto verwendet habe, war es für mich viel einfacher, die Ergebnisse zu gestalten.

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();
});

Versuchen Sie Folgendes, um es noch einfacher zu machen:

$('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)
});
  }

Hier ist eine Wiederholung der Lösung von Ted de Koning. Es enthält :

• Suche ohne Berücksichtigung der Groß- und Kleinschreibung
• Finden vieler Vorkommen der gesuchten Zeichenfolge

$.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);
};

Hier ist eine Version, die keine regulären Ausdrücke erfordert und mit mehreren Ergebnissen in der Bezeichnung übereinstimmt.

$.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);
};

Schauen Sie sich die Combobox-Demo an, die eine Hervorhebung der Ergebnisse enthält: http://jqueryui.com/demos/autocomplete/#combobox

Der dort verwendete Regex befasst sich auch mit HTML-Ergebnissen.

Hier ist meine Version:

• Verwendet DOM-Funktionen anstelle von RegEx, um Zeichenfolgen zu unterbrechen / Span-Tags einzufügen
• Nur die angegebene automatische Vervollständigung ist betroffen, nicht alle
• Funktioniert mit der UI-Version 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);
};

Markieren Sie das passende Textbeispiel

Sie können folgenden Code verwenden:

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;
    }
});

und Logik:

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

Es wird ein benutzerdefiniertes Widget erstellt, das überschrieben _renderItemwerden kann, ohne den _renderItemursprünglichen Plugin-Prototyp zu überschreiben .

In meinem Beispiel wurde auch die ursprüngliche Renderfunktion verwendet, um den Code zu vereinfachen

Es ist wichtig, wenn Sie das Plugin an verschiedenen Stellen mit unterschiedlicher Ansicht der automatischen Vervollständigung verwenden und Ihren Code nicht beschädigen möchten.

Wenn Sie stattdessen das Plugin eines Drittanbieters verwenden, gibt es eine Hervorhebungsoption: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

(siehe Registerkarte Optionen)

Um mehrere Werte zu unterstützen, fügen Sie einfach die folgende Funktion hinzu:

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>");