Die Gruppierung der Ergebnisse in JQuery UI Autocomplete-plugin?

Ich versuche zu erstellen, einige suchen Funktionalität über mehrere Arten von Daten, die mit AutoVervollständigen. Ich würde es vorziehen, um benutzerdefinierte Ansichten für jeden AutoVervollständigen-Vorschlag, als auch für die Anregungen, werden, gruppiert nach Typ. Die Gruppen sollten auch getrennt werden.

Wenn meine Erklärung schlecht ist, können Sie die Suchfunktion auf hotels.com ein Beispiel: Die Vorschläge sind gruppiert nach Stadt, Sehenswürdigkeiten, Flughäfen etc..

Habe ich die JQuery-UI-Autocomplete-plugin, und es scheint in der Lage zu tun, die meisten von dem, was ich brauche, aber ich habe nicht gesehen, jedes Beispiel, das von der Gruppierung.

Da meine javascript - /JQuery-Kenntnisse sind ein bisschen fehlt, ich hoffe jemand hier könnte mir sagen, ob es möglich ist, zu erreichen, was, die ich will Autocomplete-plugin, oder ob es ein anderes plugin, das könnte den trick tun? Ein Beispiel/Beschreibung dafür, wie es getan werden kann, wäre auch sehr dankbar.

Die AutoVervollständigen-Kategorien, Beispiel-sounds nahe an dem, was Sie beschreiben: jqueryui.com/demos/autocomplete/#categories Quelle Anzeigen, um zu sehen, wie Sie das Beispiel bis. Wenn Sie ziehen aus einer db, fügen Sie einfach die category var, um die zurückgegebenen Ergebnisse. Dann natedavisolds Beispiel erhalten Sie alles, was Sie brauchen.
Ahh. Auch wenn es nicht so aussieht, ich war surfen die demos, aber offensichtlich habe ich übersehen, dass man. Danke!

InformationsquelleAutor rogerkk | 2011-08-20

  1. 11

    Können Sie überschreiben die Art und Weise, dass AutoVervollständigen macht durch ändern der Standard-_renderMenu Funktion. Ich habe etwas ähnliches, was Sie reden, indem Sie (1) gibt die json-Ergebnisse, sortiert nach Kategorie und (2) überschreiben diese Funktion. Kein code, um Ihnen zu helfen konkret, aber hier ist ein Beispiel aus meinem eigenen code

    $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var self = this,
                currentCategory = "";
            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }
                self._renderItem( ul, item );
            });
        }
    });
    Vielen Dank für Ihre Antwort, Sie haben keine Ahnung, wie man herausfinden kann, die Kategorie der ausgewählte Vorschlag? Bitte haben Sie einen Blick auf meine Frage, stackoverflow.com/questions/32621273/...

    InformationsquelleAutor natedavisolds

  2. 3

    Dies ist die akzeptierte Antwort von @natedavisolds aktualisiert für die Verwendung mit Jquery UI 1.10. 

      $.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
      var that = this;
      var currentCategory = "";
      $.each( items, function( index, item ) {
        if (item.category != currentCategory) {
          $('<li/>').addClass('ui-autocomplete-category').html(convert_category(item.category)).appendTo(ul);
          currentCategory = item.category;
        }
        that._renderItemData( ul, item );
      });
    }   
  });
    Was macht die Funktion convert_category() ?

    InformationsquelleAutor Stephen

  3. 1

    Und darüber hinaus können Sie ersetzen:

    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );

    mit: 

    ul.append( "<span class='ui-autocomplete-category'>" + item.category + "</span>" );

    sonst werden Sie sehen, viele Fehler in der Konsole, wie: n nicht definiert ist, oder ein Element nicht definiert ist...

    InformationsquelleAutor the_root

Schreibe einen Kommentar