Suchfilter mit Schlüsselwert Tabs

Question

Ich habe eine Anforderung, einen Suchfilter wie in der Aws-Konsole zu erstellen.

In der AWS-Konsole habe ich einen Suchfilter gesehen, in dem Benutzer nach dem Klicken auf das Textfeld eine Dropdown-Liste mit den Spaltenfeldern zur Auswahl anzeigt. Wenn Sie den Wert für die Suche eingeben, wird er wie im folgenden Beispiel als Tag innerhalb des Textfelds hinzugefügt.

Kann mir jemand den Namen dieser Komponente sagen. Haben wir irgendwelche wie diese als Open Source für jquery, eckigen usw.

Ich habe viele Komponenten mit grundlegenden Autocomplete-Suche, aber nichts dergleichen.

Ich habe Bootstrap - Tag - Eingabe (https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/), aber das Problem ist, dass ich nur die verfügbaren Tags auswählen kann .... aber in meinem Fall sagen wir, wenn meine Tabelle fünf Spalten haben (Name, Ort, Kontakt , Alter, Beruf). Beim Klicken auf das Textfeld sollte zuerst eine automatische Vervollständigung für Name, Ort, Kontakt, Alter, Beruf erfolgen, von der ich sagen kann, dass ich Name gewählt habe. Dann sollte ich einen Wert eingeben, um den Wert einzugeben Einzel Tag wie Name: somevalue

Kann mir jemand helfen auf diese

bitte

Answer 1

Es gibt viele JS-Plugins für diese:

<input class="tagsinput-typeahead" type="text" /> 

var places = [ 
    {name: "New York"}, 
    {name: "Los Angeles"}, 
    {name: "Copenhagen"}, 
    {name: "Albertslund"}, 
    {name: "Skjern"} 
]; 
$('.tagsinput-typeahead').tagsinput({ 
    typeahead: { 
    source: places.map(function(item) { return item.name }), 
    afterSelect: function() { 
     this.$element[0].value = ''; 
    } 
    } 
}); 

für Referenz-Check this:Hier

ist Bootstrap-Plugin zu: Click here