Verwenden Sie einen anderen Wert als JSON-Daten anstelle von displayKey, indem Sie Typeahead verwenden

Question

Ich habe begonnen, Typeahead.js zu verwenden und habe Mühe, einen Benutzer zu finden, nach einem Firmennamen zu suchen und zu suchen. Geben Sie nach der Auswahl den zugehörigen Buchungskreis ein.

.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 Script:

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 dies zeigt nur die Liste der Codes, wenn der Benutzer in das Eingabefeld ein. Allerdings würde ich gerne wissen, ob es eine Möglichkeit gibt, sie auf code Suche zu ermöglichen, 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.

Danke!

Answer 1

Wenn ich richtig gelesen, ich glaube, das ist das, was Sie 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() 
}); 

Sie das lokale wollen Prefetch/remote natürlich ändern, wie Sie für die JSON-Datei hatte.

UPDATE

FIDDLE

Answer 2

Sie benötigen die'displayKey' Variable zu verwenden. Siehe unten copy-paste von den typeahead docs:

displayKey - Für einen bestimmten Vorschlag Objekt bestimmt die String-Darstellung davon. Dies wird verwendet, wenn der Wert des Eingabesteuerelements nach der Auswahl eines Vorschlags festgelegt wird. Kann entweder eine Schlüsselzeichenfolge oder eine Funktion sein, die ein Vorschlagsobjekt in eine Zeichenfolge umwandelt. Standardeinstellung ist value.

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

Ihr spezifischer Code wäre dann so etwas wie diese:

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 dies ohne Problem arbeiten. Ich habe dieses spezielle Beispiel noch nicht ausprobiert, also lassen Sie mich wissen, ob es funktioniert.

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

Answer 3

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

Dank Eric Saupe fand ich eine intelligente Lösung:

//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 SCRIPT

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

einfach die typeahead benutzerdefinierte Ereignisse wie in der docs on github beschrieben verwenden.

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

JSFIDDLE

Answer 4

displayKey verwendet wird, der Schlüssel, um anzuzeigen, sollte und in dem Eingabefeld in der Auswahlliste angezeigt werden, nachdem der Benutzer einen Eintrag ausgewählt hat.

Wenn Sie möchten, dass die in der Dropdown-Liste angezeigten Einträge verschiedene von was in das Eingabefeld endet müssen Sie eine benutzerdefinierte Vorlage verwenden.

Vom documentation:

suggestion - Gebraucht einen einzigen Vorschlag zu machen. Wenn gesetzt, muss dies eine vorkompilierte Vorlage sein. Das zugehörige Vorschlagsobjekt dient als Kontext. Standardwert ist der Wert displayKey, der in einem -Tag eingeschlossen ist, d. H. <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 eingereichten Vorlage stock.code in der Dropdown-Liste anzuzeigen verwendet wird, während stock.company_name wird im Eingabefeld angezeigt werden, nachdem der Benutzer einen Eintrag auswählt.

Answer 5

Hatte das gleiche Problem, konnte nicht mit der Anzeige oder displayKey-Eigenschaft arbeiten. um es funktionierte die Eigenschaft Name auf die Quellobjekte durch Zugabe:

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

Answer 6

den Wert hinzufügen, die in der Anzeige Parameter gezeigt werden müssen:

$(".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="javascript:void(0);" class="list-group-item">' + data.company_name + '</a>'; 
     } 
    }, 
    display: function(data) { return data.company_name; } 
}); 

Hoffe, das ist hilfreich