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.


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.


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.


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




En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.