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

J'ai une exigence où je dois utiliser bootstrap de saisie semi-automatique de liste déroulante, MAIS l'utilisateur peut avoir sous forme de texte dans cette liste, si elles le souhaitent. Avant de penser à la TypeAhead, je pourrais utiliser Bootstrap TypeAhead zone de texte, mais j'ai besoin d'avoir la liste déroulante parce que nous voulons donner à certaines valeurs par défaut comme anticipé des options au cas où les utilisateurs ne sais pas quoi chercher.

Je suis en utilisant ce avec MVC DropDownListFor comme qui crée une sélection pour nous.

J'ai trouvé cet article qui n'a que pour moi.

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

Tout ce que j'avais à faire était de décoller le nom de la commande de sélection et le contrôle a été de me laisser entrer sous forme de texte. Tout bon jusqu'ici.

Maintenant, je suis en utilisant ce en collaboration avec Knockoutjs. - Je lier mon options et de la valeur sélectionnée pour le contrôle de sélection, puis sur la ligne rendu de mon modèle, je l'ai appelé (sélecteur).zone de liste déroulante() qui rend le contrôle de sélection d'un bootstrap comobobox et ajoute un contrôle d'entrée et masque le contrôle de sélection dans les coulisses derrière.

Le problème est maintenant, quand j'essaie d'obtenir de lui des valeurs à des postes de serveur, puisque la valeur que j'ai mis dans la zone de saisie n'est pas valide options dans les options j'ai donné pour sélectionner le contrôle, il est toujours à la première option par défaut. C'est parce que, j'ai mis la liaison de la valeur sélectionnée sur une sélection de contrôle et non sur la zone de saisie qui a été créé par bootstrap-combobox.js.

Ma question est comment puis-je obtenir la boîte de saisie de données-lier de la même propriété que le contrôle de sélection a été lié.

D'autres options??
Laissez-moi savoir si vous avez besoin de plus de précisions ou des questions.
S'il vous plaît suggérer.

Grâce.

  • J'ai trouvé une solution à ma situation. J'ai utilisé TypeAhead zone de texte au lieu de la saisie semi-automatique comobox et a montré les options de la liste déroulante par défaut lorsque les utilisateurs axé sur le contrôle ou de frapper vers le bas bouton de trop. De cette façon, ils savent ce qu'ils peuvent chercher qui était ma première exigence.
InformationsquelleAutor Krishna Teja Veeramachaneni | 2012-10-15
  1. 249

    Ont un coup d'oeil à Select2 pour Bootstrap. Il doit être capable de faire tout ce dont vous avez besoin.

    Une autre bonne option est Selectize.js. Il se sent un peu plus naturel pour l'Amorçage.

    • Comment avez-vous utilisé Select2 pour permettre la saisie de texte qui ne sont pas déjà inclus dans la source de données?
    • Comme @compcentral correctement mentionné, Select2 NE permet PAS la saisie de tout ce qui n'est pas dans la liste des options. À l'aide de (auto), en fonction de balisage pour simuler c'est gênant, car il n'accepte pas de texte avec des espaces à l'intérieur.
    • Quelle bonne trouvaille! J'ai fini par utiliser Selectize puisqu'il ne semble plus Bootstrap-esque.
    • En raison du problème de l'a souligné @compcentral et Stas, j'ai choisi d'aller avec selectize.js.
    • pourquoi vous n'utilisez pas la télécommande de la source de données de la méthode?
    • En fait, je suis en utilisant select2 de forme libre, indépendant du contenu JSON c'est en tirant. Il est possible.
    • Selectize.js ne pas fournir la totalité de l'échantillon de code html. Perte de temps que vous vous retrouvez débogage leurs échantillons pour savoir pourquoi il ne fonctionne pas.

    InformationsquelleAutor Jasny - Arnold Daniels
  2. 21

    La base de HTML5 datalist travail? C'est propre et vous n'avez pas à jouer avec le désordre de la troisième partie du code. W3SCHOOL tutoriel

    La MDN Documentation est très éloquent et propose des exemples.

    • Le problème majeur avec le HTML 5 datalist est qu'il ne prend pas en charge tous les événements DOM. Donc, chaque fois que vous sélectionnez une valeur, vous devez onglet en dehors de la zone de texte correspondante
    • Ce n'est pas vrai (plus?). L'entrée liées à la datalist feux de changement et d'entrées d'événements, au moins. Regardez ici, les changements et les événements d'entrée le feu à un journal de la console.
    • Toutes ces années. Toutes ces années de déconner avec des bibliothèques tierces au lieu d'un simple et propre, déjà une solution de prise en charge...
    InformationsquelleAutor Juto
  3. 3

    Select2 pour Bootstrap 3 natif plugin

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

    ce plugin utilise select2 plugin jquery

    nuget

    H> Install-Package Choisir 2-Bootstrap

    • Bonjour. Est-il une différence avec la première upvoted réponse ici? Vous dupliquez le sélectionner 2 suggestion aussi loin que je peux voir?
    InformationsquelleAutor Mahesh
  4. 1

    Carburant UX zone de liste déroulante a toutes les fonctionnalités que vous attendez.

    • Il n'a pas typeahead aussi loin que je peux voir.
    • Pas de saisie semi-automatique
    InformationsquelleAutor Stas Slabko
  5. 1

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

    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 # pour tout ce que vous voulez

    InformationsquelleAutor
  6. 0

    Bootstrap Tokenfield semble bon aussi: http://sliptree.github.io/bootstrap-tokenfield/

    • pourquoi semble-t-il bon?
    InformationsquelleAutor Spaceploit