liste déroulante / combobox de saisie semi-automatique de bootstrap avec Knockoutjs

114

J'ai une exigence où JE DOIS utiliser la liste déroulante de saisie semi-automatique de bootstrap, MAIS l'utilisateur peut avoir un texte de forme libre dans cette liste déroulante s'il le souhaite. Avant de penser à TypeAhead, je pourrais utiliser la zone de texte Bootstrap TypeAhead, mais je dois avoir la liste déroulante car nous voulons donner des valeurs par défaut comme options de démarrage au cas où les utilisateurs ne sauraient pas quoi rechercher.

J'utilise ceci avec MVC DropDownListFor car cela crée un contrôle de sélection pour nous.

J'ai trouvé cet article qui fait ça pour moi.

https://github.com/danielfarrell/bootstrap-combobox/pull/20

Tout ce que j'avais à faire était de retirer le nom du contrôle de sélection et le contrôle me permettait d'entrer du texte au format libre. Tout va bien jusqu'à présent.

Maintenant, j'utilise ceci en conjonction avec Knockoutjs. Je lie mes options et la valeur sélectionnée au contrôle de sélection, puis sur la ligne rendue de mon modèle, j'ai appelé (selector) .combobox () qui fait du contrôle de sélection une comobobox bootstrap et ajoute un contrôle d'entrée et masque le contrôle de sélection dans les scènes derrière.

Le problème maintenant, c'est lorsque j'essaie de faire publier les valeurs sur le serveur, car la valeur que je mets dans la zone de saisie n'est pas une option valide parmi les options que j'ai données pour sélectionner le contrôle, il la définit toujours sur la première option par défaut. C'est parce que j'ai défini la liaison de la valeur sélectionnée sur le contrôle de sélection et non sur la zone de saisie qui a été créée par bootstrap-combobox.js.

Ma question est de savoir comment obtenir la zone de saisie pour lier les données à la même propriété que celle à laquelle le contrôle de sélection était lié.

D'autres options ?? Faites-moi savoir si vous avez besoin de plus de précisions ou si vous avez des questions. Veuillez suggérer.

Merci.

autocomplete combobox twitter-bootstrap knockout.js html.dropdownlistfor Krishna Teja Veeramachaneni
la source
J'ai trouvé une solution à ma situation. J'ai utilisé la zone de texte TypeAhead au lieu de la comobox Autocomplete et j'ai affiché la liste déroulante des options par défaut lorsque les utilisateurs se concentraient sur le contrôle ou appuyaient également sur le bouton. De cette façon, ils savent ce qu'ils peuvent rechercher, ce qui était ma principale exigence.
Krishna Teja Veeramachaneni

Réponses:

254

Jetez un œil à Select2 pour Bootstrap . Il devrait pouvoir faire tout ce dont vous avez besoin.

Une autre bonne option est Selectize.js . Cela semble un peu plus natif de Bootstrap.

Arnold Daniels
la source
27
Comment avez-vous utilisé Select2 pour autoriser la saisie de texte qui n'était pas déjà incluse dans la source de données?
compcentral
4
Comme @compcentral l'a correctement mentionné, Select2 NE VOUS PERMET PAS de saisir tout ce qui ne figure pas dans la liste d'options. L'utilisation de la fonction de marquage (automatique) pour simuler cela est fastidieuse, car elle n'accepte pas le texte avec des espaces à l'intérieur.
Stas Slabko
2
Quelle bonne trouvaille! J'ai fini par utiliser Selectize car cela semble plus Bootstrap-esque.
Steven le
1
En raison du problème signalé par @compcentral et Stas, j'ai choisi d'utiliser selectize.js.
Neil Monroe du
1
@compcentral pourquoi n'utilisez-vous pas la méthode de source de données distante?
Clain Dsilva
23

La liste de données HTML5 de base fonctionne-t-elle? C'est propre et vous n'avez pas à jouer avec le code tiers désordonné. Tutoriel W3SCHOOL

La documentation MDN est très éloquente et présente des exemples.

Juto
la source
3
Le problème majeur avec HTML 5 datalistest qu'il ne prend en charge aucun événement DOM. Ainsi, chaque fois que vous sélectionnez une valeur, vous devez sortir de la zone de texte correspondante
Pawan
@Pawan Ce n'est plus vrai (plus?). L'entrée liée au datalist déclenche au moins les événements de changement et d'entrée. Regardez ici , les événements de modification et d'entrée déclenchent un journal de console.
Félix Gagnon-Grenier
1
Toutes ces années. Toutes ces années à déconner avec des bibliothèques tierces au lieu d'une solution simple et propre déjà prise en charge ...
Félix Gagnon-Grenier
3

Select2 pour le plugin natif Bootstrap 3

https://fk.github.io/select2-bootstrap-css/index.html

ce plugin utilise le plugin jquery select2

pépite

PM> Install-Package Select2-Bootstrap

Mahesh
la source
1
Bonjour. Y a-t-il une différence avec la première réponse votée ici? Vous dupliquez la suggestion Select 2 dans la mesure où je peux voir?
Félix Gagnon-Grenier
1

Fuel UX combobox a toutes les fonctionnalités que vous attendez.

Stas Slabko
la source
1
Il n'a pas de typeahead pour autant que je puisse voir.
jpkeisala
1

Puis-je suggérer http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html , fonctionne plus comme la suggestion de publication Twitter où il vous donne une liste d'utilisateurs ou de sujets basés sur des balises @ ou #,

voir la démo ici: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

dans celui-ci, vous pouvez facilement changer le @ et le # en tout ce que vous voulez


la source