filtre de recherche avec les onglets de valeur de clé

Question

J'ai besoin de construire un filtre de recherche comme nous le voyons dans la console Aws.

Dans Aws Console j'ai vu un filtre de recherche où l'utilisateur en cliquant sur le champ de texte une liste déroulante montrant les champs de colonne pour la sélection. en donnant la valeur pour la recherche, il sera ajouté comme une étiquette dans le champ de texte comme indiqué ci-dessous. Quelqu'un peut-il me dire le nom de ce composant?

Est-ce que nous avons ce genre de fichier disponible en open source pour jquery, angular etc

J'ai créé de nombreux composants avec une recherche de base automatique, mais rien de tel.

J'ai l'entrée de balise Bootstrap (https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/) mais le problème est que là je ne peux sélectionner que les balises disponibles .... mais dans mon cas disons si ma table a cinq colonnes (Nom, Lieu, Contact , Âge, profession). En cliquant sur le champ de texte, une saisie semi-automatique pour Nom, Lieu, Contact, Âge, Occupation doit venir en premier, à partir de laquelle je choisis le Nom, alors cela devrait me permettre d'entrer une certaine valeur pour la recherche et finalement elle devrait être ajoutée balise individuelle comme nom: someValue

quelqu'un peut-il s'il vous plaît aidez-moi à ce

Answer 1

Il y a beaucoup de plugins JS pour cela:

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

pour vérifier cette référence: Click here

Voici le plugin bootstrap aussi: Click here