Verwenden Sie mithilfe von Typeahead einen anderen Wert aus JSON-Daten anstelle von displayKey

Lesezeit: 6 Minuten

Benutzer-Avatar
Benutzer1779796

Ich habe begonnen, Typeahead.js zu verwenden, und kämpfe darum, einen Weg zu finden, wie es einem Benutzer ermöglicht wird, einen Firmennamen einzugeben und zu suchen, nachdem er den zugehörigen Firmencode eingegeben hat.

.json-Datei:

[{
    "company_name": "Facebook",
    "code": "fb",
}, {
    "company_name": "Google",
    "code": "goog",
}, {
    "company_name": "Yahoo",
    "code": "yhoo",
}, {
    "company_name": "Apple",
    "code": "aapl",
}, {
    "company_name": "Royal Mail",
    "code": "rmg.l",
}]

.js-Skript:

var stocks = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.code);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 3,
    prefetch: {
        url: 'javascripts/stockCodes.json',
        filter: function(list) {
            return $.map(list, function(stock) {
                return {
                    code: stock
                };
            });
        }
    }
});

stocks.initialize();

$('.typeahead').typeahead(null, {
    name: 'stocks',
    displayKey: 'code',
    source: stocks.ttAdapter()
});

Derzeit zeigt dies nur die Liste der Codes an, wenn der Benutzer in das Eingabefeld tippt. Ich würde jedoch gerne wissen, ob es eine Möglichkeit gibt, ihnen die Suche zu ermöglichen code aber einmal ausgewählt, der Wert in der Textbox zu sein company_name? Ist das mit diesem Plugin überhaupt möglich? Jede Hilfe wird sehr geschätzt.

Vielen Dank!

  • Können Sie Ihre Datenstruktur ändern?

    – Tomanow

    19. Februar 2014 um 23:44 Uhr

  • @Tomanow Ja sicher. Ich dachte nur, diese Struktur wäre effizient. Vielen Dank

    – Benutzer1779796

    19. Februar 2014 um 23:45 Uhr


  • Ich habe gerade meine Antwort aktualisiert. Jetzt soll es genauer werden.

    – Tomanów

    20. Februar 2014 um 0:38 Uhr

Benutzer-Avatar
Esseb

displayKey wird verwendet, um anzugeben, welche Taste in der Dropdown-Liste angezeigt werden soll und im Eingabefeld, nachdem der Benutzer einen Eintrag ausgewählt hat.

Wenn Sie möchten, dass die Einträge in der Dropdown-Liste angezeigt werden anders von dem, was im Eingabefeld landet, müssen Sie eine benutzerdefinierte Vorlage verwenden.

Von dem Dokumentation:

suggestion – Wird verwendet, um einen einzelnen Vorschlag zu rendern. Wenn gesetzt, muss es sich um ein vorkompiliertes Template handeln. Als Kontext dient das zugehörige Vorschlagsobjekt. Standardmäßig auf den Wert von displayKey eingewickelt in ein p Etikett dh
<p>{{value}}</p>.

So etwas sollte funktionieren:

$('.typeahead').typeahead(null, {
    name: 'stocks',
    displayKey: 'company_name',
    source: stocks.ttAdapter(),
    templates: {
        suggestion: function (stock) {
            return '<p>' + stock.code + '</p>';
        }
    }
});

Die eingereichte Vorlage wird zum Anzeigen verwendet stock.code in der Dropdown-Liste, während stock.company_name wird im Eingabefeld angezeigt, nachdem der Benutzer einen Eintrag ausgewählt hat.

Ich bin kein jQuery / JavaScript-Guru. Also ich bevorzuge den einfachen Weg. Nur um zu verstehen, was ich getan habe, wenn ich mir später meinen Code ansehe …

Dank an Eric Saupe Ich habe eine clevere Lösung gefunden:

//JSON FILE
[
    {
        "company_name": "Facebook",
        "code": "fb",
    },
    {
        "company_name": "Google",
        "code": "goog",
    },
    {
        "company_name": "Yahoo",
        "code": "yhoo",
    },
    {
        "company_name": "Apple",
        "code": "aapl",
    },
    {
        "company_name": "Royal Mail",
        "code": "rmg.l",
    },
 ]

// JS-SKRIPT

   var stocks = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('company_name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: 'javascripts/stockCodes.json'
    });

    stocks.initialize();

    $('.typeahead').typeahead(
        null, {
        name: 'stocks',
        displayKey: 'company_name',
        source: stocks.ttAdapter()
    }).on('typeahead:selected', function(event, data){            
        $('.typeahead').val(data.code);        
    });

Verwenden Sie einfach die benutzerdefinierten Typeahead-Ereignisse, wie in beschrieben docs auf github.

Hoffe, das hilft (und wenn es nur für meine eigene spätere Referenz ist).

JSFIDDLE

  • Sie möchten auch ‘typeahead:autocompleted’ behandeln.

    – Alok

    28. April 2015 um 20:24 Uhr

  • Scheint die beste Lösung zu sein, aber das JSFIDDLE funktioniert nicht mehr. Beim Anklicken schreibt es den ganzen Firmennamen.

    – NLemay

    13. Mai 2016 um 15:16 Uhr

  • Ist es typeahead:selected oder typeahead:select? Offizielle Dokumente sagen letzteres. So oder so konnte ich das Ereignis nicht auslösen. Ich fügte hinzu alert(data.code); zu deiner Geige und es feuerte auch nicht. Was sollte der richtige Weg sein?

    – Alte Knacker

    1. Mai 2017 um 3:45 Uhr

  • Das JSFIDDLE funktioniert wie erwartet für mich. Getestet habe ich mit Firefox und Chrome. Ich kann nicht sagen, ob es :s selected oder :select ist. Bei mir hat es mit :s selected funktioniert Inzwischen bin ich auf jQuery Typeahead umgestiegen (runningcoder.org/jquerytypeahead/documentation). Es ist gut dokumentiert und funktionsreich und die Konfiguration ist einfacher (imho).

    – Tobse

    4. Mai 2017 um 9:18 Uhr


  • Auch nach Gebrauch setTimeout Methode wie: setTimeout(function() { $('.typeahead').val(data.code); }, 1);, es änderte den Wert beim Verlassen des Eingabefelds zurück. Also musste ich auf die vorlagenbasierte Lösung von @Esseb umsteigen.

    – Rehmat

    31. März 2019 um 4:40 Uhr


Sie müssen die Variable „displayKey“ verwenden. Siehe unten Kopieren und Einfügen aus den Textvervollständigungsdokumenten:

displayKey – Bestimmt für ein gegebenes Vorschlagsobjekt dessen Zeichenfolgendarstellung. Dies wird verwendet, wenn der Wert des Eingabesteuerelements festgelegt wird, nachdem ein Vorschlag ausgewählt wurde. Kann entweder eine Schlüsselzeichenfolge oder eine Funktion sein, die ein Vorschlagsobjekt in eine Zeichenfolge umwandelt. Standardmäßig auf value.

https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md

Ihr spezifischer Code würde dann ungefähr so ​​​​aussehen:

var stocks = new Bloodhound({
        datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.code); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 3,
        prefetch: {
            url: 'javascripts/stockCodes.json',
            filter: function(list) {
                // This should not be required, but I have left it incase you still need some sort of filtering on your server response
                return $.map(list, function(stock) { return { code: stock.code, company_name: stock.company_name }; });
            }
        }
    });

    stocks.initialize();

    $('.typeahead').typeahead(null, {
        name: 'stocks',
        displayKey: function(stock) {
           return stock.company_name;
        },
        source: stocks.ttAdapter()
    });

Ich hatte eine sehr ähnliche Anforderung auf meiner eigenen Website, und ich hatte diese Arbeit ohne Probleme. Ich habe dieses spezielle Beispiel jedoch nicht ausprobiert. Lassen Sie mich wissen, ob es funktioniert.

Denken Sie daran, anzurufen stocks.clearPrefetchCache(); um Ihren Cache zu löschen, um Fehler leichter zu verfolgen.

Benutzer-Avatar
Tomanow

Wenn ich richtig gelesen habe, glaube ich, dass Sie das wollen:

var stocksData = [{
    "Facebook": "fb",
}, {
    "Google": "goog",
}, {
    "Yahoo": "yhoo",
}, {
    "Apple": "aapl",
}, {
    "Royal Mail": "rmg.l",
}, ];

var stocks = new Bloodhound({
    datumTokenizer: function (d) {
                  for (var prop in d) {
                      return Bloodhound.tokenizers.whitespace(d[prop]);
                  }

    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 3,
    local: stocksData,
});

stocks.initialize();

$('input').typeahead(null, {
    name: 'stocks',
    displayKey: function(stocks) {
        for (var prop in stocks) {
            return prop;    
        }
    },
    source: stocks.ttAdapter()
});

Natürlich möchten Sie das lokale in prefetch/remote ändern, wie Sie es für die json-Datei getan haben.

AKTUALISIEREN

GEIGE

Benutzer-Avatar
Marco

Hatte das gleiche Problem, konnte es mit der Eigenschaft display oder displayKey nicht zum Laufen bringen. Umgangen, indem den Quellobjekten die Name-Eigenschaft hinzugefügt wurde:

            $.each(stocks, function (i, item) {
                item.name = item.company_name;
            });

Benutzer-Avatar
ArtisanBay

Fügen Sie den Wert hinzu, der in angezeigt werden muss Anzeige Parameter:

$(".comp-search").typeahead({
    hint: true,
    highlight: true,
    minLength: 1,
    displayKey: 'company_name',
}, {
    source: engine.ttAdapter(),
    templates: {
        empty: ['<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'],
        header: ['<div class="list-group search-results-dropdown">'],
        suggestion: function (data) {
            return '<a href="https://stackoverflow.com/questions/21895025/javascript:void(0);" class="list-group-item">' + data.company_name + '</a>';
        }
    },
    display: function(data) { return data.company_name; }
});

Hoffe, das ist hilfreich

1175980cookie-checkVerwenden Sie mithilfe von Typeahead einen anderen Wert aus JSON-Daten anstelle von displayKey

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy