Twitter Bootstrap Typeahead - Id & Beschriftung

Ab version 0.10.1 von Twitter Typeahead (https://github.com/twitter/typeahead.js), Id /Label nativ unterstützt wird:

  $('input[name=address]').typeahead({
        hint: false
    }, {
        source: function (query, cb) {
            $.ajax({
                url: '/api/addresses?q=' + encodeURIComponent(query),
                dataType: 'json',
                cache: false,
                type: 'GET',
                success: function (response, textStatus, jqXHR) {
                    cb(response.data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });
        },
        name: 'addresses',
        displayKey: 'text'
    }).on('typeahead:selected', function (e, suggestion, name) {
        window.location.href = '/' + suggestion.id;
    });

Wenn das Beispiel oben, ich bin übergeben Sie ein array von Objekten, um die Quelle callback (cb). Durch die Angabe displayKey: 'text', ich sage die Bibliothek zu verwenden, die 'text' - Eigenschaft für das auto-suggest. Wenn der "typeahead:wählen Sie' callback wird aufgerufen, das zweite übergebene argument in (Vorschlag) enthält das Objekt, das ausgewählt wurde.

InformationsquelleAutor Johnny Oshika

Ich das problem gesehen haben, mit einigen dieser Lösungen ist, dass die source Funktion wird immer wieder aufgerufen, auf jedem keyup-Ereignis der Eingabe-box. Bedeutung, die arrays gebaut werden und geloopt über auf jedem keyup-Ereignis ein.

Ist dies nicht notwendig. Mit einem Abschluss können Sie verarbeiten die Daten nur einmal, und erhalten eine Referenz im source Funktion. Darüber hinaus werden folgende Lösung löst den globalen namespace mit dem problem von @Gerbus die Lösung, und ermöglicht auch die Wiedergabe mit dem array von Daten, sobald der Benutzer ausgewählt hat, der etwas (zum Beispiel, entfernen das Element aus der Liste).

  //Setup the auto-complete box of users
  var setupUserAcUi = function(data) {
      var objects = [];
      var map = {};
      $.each(data, function(i, object) {
          map[object.name] = object;
          objects.push(object.name);
      });

      //The declaration of the source and updater functions, and the fact they
      //are referencing variables outside their scope, creates a closure
      $("#splitter-findusers").typeahead({
        source: function(query, process) {
            process(objects);
        },
        updater: function(item) {
            var mapItem = map[item];
            objects.splice( $.inArray(item, objects), 1 ); //Remove from list
            //Perform any other actions
        }
      });
  };

  //`data` can be an array that you define,
  //or you could pass `setupUserAcUi` as the callback to a jQuery.ajax() call
  //(which is actually how I am using it) which returns an array
  setupUserAcUi(data);

InformationsquelleAutor vcardillo

Hier ist eine gekapselte Lösung. Mit dieser Lösung können Sie mehr als eine typeahead auf der gleichen Seite.

Dies ist eine modifizierte version von #13279176 Gerbus Antwort.

$('.make-me-typeahead').typeahead({
    source: function (query) {
        var self = this;
        self.map = {};
        var items = [];

        var data = [
            {"id": 1, "label": "machin"},
            {"id": 2, "label": "truc"}
        ];

        $.each(data, function (i, item) {
            self.map[item.label] = item;
            items.push(item.label)
        });

        return items;
    },

    updater: function (item) {
        var selectedItem = this.map[item];
        this.$element.data('selected', selectedItem);
        return item;
    }
});

Nun, wenn Sie brauchen, Holen Sie den Schlüssel des aktuellen Elements, die Sie gerade brauchen $('.make-me-typeahead').data('selected')

InformationsquelleAutor Capy

Nur eine andere Art zu implementieren Pierref Funktion.

var separator = "####";
$("'.autocomplete'").typeahead({
    minLength: 3,
    source: function (query, process) {
        var config = {
            type: 'POST',
            url: 'Requests/AJAX.PHP', //Change it
            cache: 'false',
            data: {
                query: query
            },
            dataType: 'json'
        };

        config.beforeSend = function () {
            //TODO : loading gif
        };

        config.error = function (json) {
            if (json.error) {
                alert(json.error);
            }
        };

        config.success = function (json) {
            if (json.error) {
                alert(json.error);
            }
            var data = [];
            for (var i = 0; i < json.data.length; i++) {
                data.push(json.data[i].id + separator + json.data[i].name);
            }

            process(data);
        };

        $.ajax(config);
    },
    highlighter: function (item) {
        var parts = item.split(separator);
        parts.shift();
        return parts.join(separator);
    },
    updater: function (item) {
        var parts = item.split(separator);
        $('.autocomplete').val(parts.shift());
        return parts.join(separador);
    }
});

InformationsquelleAutor Pedro Muniz

Machte ich eine Eckige 2-Richtlinie typeahead-angular2, dass genau das tut, was Sie wollen, und behandelt den Fall der nicht eindeutigen labels. Sie können die typeahead Teil.

Dieser Richtlinie behandeln komplexe Objekte mit mehreren Attributen und
behandelt den Fall, wo die Bezeichnung ist nicht einzigartig. es im Grunde erhält 4
Parameter :

• @Input() name; //Namen für die typeahead
• @Input() objectsDataSet; //Datensatz-Objekte , es könnte jeder Art von Objekt
• @Input() handleFunction; //callback Funktion, die aufgerufen wird, wenn das Objekt ausgewählt ist , können Sie übergeben das Objekt oder was auch immer Sie wollen
  zu dieser Funktion.
• @Input() labelAtt; //das label-Attribut (object[labelAtt] dem Benutzer angezeigt wird , muss es ein string sein).

Beispiel :

<input type="text" class="form-control" placeholder="Name..." typeaheadautocomplete [objectsDataSet]="clientList" [labelAtt]="'Firstname'" [name]="'clients'" [handleFunction]="logClient">

wie Sie sehen können : clientList ist ein array von "client" - Objekte , lassen Sie uns
sagen {"Fistname":"Billel","Lastname":"Guerfa",....} verwenden wir die
Vorname-Attribut für die AutoVervollständigen-Liste. logClient hier erhält
ein client-Objekt und zeigt es.

Abhängigkeiten :

nur erklären, sondern die typeahead-Schrift am index.html Ebene.

• typeahead : https://twitter.github.io/typeahead.js/

Finden Sie unter: https://github.com/BillelGuerfa/typeahead-angular2/

InformationsquelleAutor Billel Guerfa