Jquery autocomplete mit mehreren keywords, die Hervorhebung und teilweise übereinstimmungen

Ich bin auf der Suche nach einem JQuery-autocomplete wird:

  • Suche teilweise übereinstimmungen
  • Markieren Sie alle Ereignisse, egal wo Sie erscheinen
  • Die Möglichkeit, mehrere word -
  • Ermöglichen Sie remote-Datenquellen (d.h. PHP-Filter-Datenbank, basierend auf der querystring-Parameter, die dynamisch aktualisiert wird mit jedem Tastendruck)

So zum Beispiel

Suche:
"ich wa Zuhause"

Gibt:
"zeigen mir die wa y zu gehen Hause"

Ich habe eine schreckliche Zeit, die versucht, etwas zu finden, dass das, obwohl es in der gemeinsamen Erwartung einer Google-Stil AutoVervollständigen.

Den monkeypatch von jquery ui autocomplete ( jQueryUI: wie kann ich custom-format das AutoVervollständigen-plug-in die Ergebnisse? ) nahe kommt, aber scheint nicht zu bieten dynamische remote-Datenquellen.

Habe ich auch gekommen, schließen Sie mit dem folgenden Skript:

var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
$("#f input").autocomplete({
   source: "livesearch.php",
   open: function(e, ui) {
      var origKeyword = $("#f input").val();
      var acData = $(this).data('autocomplete');
      acData.menu.element.find('a').each(function() {
         var me = $(this);
         var regex = new RegExp(acData.term, "gi");
         me.html(me.text().replace(regex, function(matched) {
            return termTemplate.replace('%s', matched);
         }));
      });

   },
   select: function(event, ui) {
      var keyword = $("#f input").val();
      $("#f input").val('');
      window.location.href = 'MYURLHERE?VARIABLE=' + ui.item.value;
      return false;
   },
   focus: function(event, ui) {
      return false;
   }
});

Jedoch, es nicht handhaben Hervorhebung mehrere Wörter durch Leerzeichen getrennt ein.

wenn jemand irgendwelche Vorschläge wäre ich äußerst dankbar.

  • Verwenden Sie eine Funktion für die Quelle die option manuell den server Abfragen. Suchen Sie bei Schritt 4 hier: net.tutsplus.com/tutorials/javascript-ajax/... Beachten Sie die in Schritt 5, dass AutoVervollständigen geht die Suche von Elementen zu $_GET['term']
  • Ja, eine dynamische remote-Quelle ist auf jeden Fall möglich. Hervorhebung der einzelnen Wörter ist schwieriger, aber nicht unmöglich mit jQueryUI AutoVervollständigen
  • Dank Nal. Ich hatte einen gehen auf das hinzufügen in der Funktion, die Sie erwähnt in code unterstützt mehrere hervorheben. Allerdings kann ich nicht bekommen es funktioniert. Würde Sie vielleicht einen Blick auf meinen code in Antwort 1?
InformationsquelleAutor iltdev | 2012-09-05
  1. 1

    @user287212, ich habe einige der Forschung über JQuery AutoComplete mit mehreren keywords. Ich fand ein Beispiel in diesem Adresse. Es ist ein Komplexes Beispiel, aber es ist ein JQuery-AutoComplete Beispiel mit mehreren keywords. Wenn Sie schreiben ein symbol in der symbol-Eingabe, wird das Programm bringen Sie die Begriffe in der Datei. Beispiel Erläuterung an dieser link. Sie können den Blick auf diesen link.

    • Dank Aziz. Das scheint sicher zu tun, was ich will... aber es ist technisch aus meiner Liga, denke ich. Ich werde sicherlich einen Blick auf Sie obwohl. Ich habe nur gehofft, ich wäre in der Lage zu ändern, mein Beispiel oben ist es sooo nah zu arbeiten.
    InformationsquelleAutor RuudVanNistelrooy
  2. 1

    Dies ist die Lösung, die ich ging mit:

    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>

<style type='text/css'>
   .srchHilite {background-color: yellow;}
</style>

<script type='text/javascript'>
$(document).ready(function(){

var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";
$("#tags").autocomplete({
 source: function(request, response) {
        $.getJSON("livesearch.php", request, function(data, status, xhr ) {

            var newmatchArry = new Array();
            var matchArry   = data.slice ();
            var srchTerms   = $.trim (request.term).split (/\s+/);

                //--- For each search term, remove non-matches.
                $.each (srchTerms, function (J, term) {
                    var regX    = new RegExp (term.value, "i");
                    matchArry   = $.map (matchArry, function (item) {
                        return regX.test (item)  ?  item  : null;
                    } );
                } );

            response(matchArry);

        });
    },

  open:   function (event, ui) {
                /*--- This function provides no hooks to the results list, so we have to trust the
                    selector, for now.
                */
                var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
                var srchTerm    = $.trim ( $("#tags").val () ).split (/\s+/).join ('|');

                //--- Loop through the results list and highlight the terms.
                resultsList.each ( function () {
                    var jThis   = $(this);
                    var regX    = new RegExp ('(' + srchTerm + ')', "ig");
                    var oldTxt  = jThis.text ();

                    jThis.html (oldTxt.replace (regX, '<span class="srchHilite">$1</span>') );
                } );
            }
} );

});
</script>
</head>

<body>
<input id="tags">

</div>
</body>

</html>
    InformationsquelleAutor iltdev
Schreibe einen Kommentar