Est-ce que quelqu'un sait un contrôle de bootstrap compatible avec le bootstrap de Twitter/autosuggest?

Je suis dans le besoin d'un contrôle de liste déroulante/autocomplete compatible bootstrap que je peux attacher à un champ de texte et ouvre prérempli avec des options quand je place le curseur dans la zone de texte. En bas, il devrait y avoir une option pour ajouter un nouvel article par t.ex. ouvrir une boîte de dialogue modale sur le clic. L'utilisateur devrait aussi être capable d'entrer son propre texte comme avec une combobox. C'est une fonctionnalité que j'ai vu de nombreux sites utilisent et cela fonctionne très bien.Est-ce que quelqu'un sait un contrôle de bootstrap compatible avec le bootstrap de Twitter/autosuggest?

Plus précisément mon utilisation est de remplir une facture et de permettre à un utilisateur d'ajouter un nouveau produit en cliquant sur le lien "ajouter un nouveau" en bas. Une fenêtre contextuelle modale s'ouvrira permettant à l'utilisateur d'ajouter des détails. Lorsque la modalité se ferme et que le produit est enregistré pour plus tard, la ligne de facture aura alors Description, Prix et TVA. De plus, si l'utilisateur sélectionne l'une des lignes pré-remplies, le produit lui sera attribué. Dans le cas où il s'agit d'un produit unique, l'utilisateur entre simplement la description et ajoute le prix et la TVA manuellement.

Le plus proche que j'ai vu est select2 mais il ne semble pas faire tout à fait ce que je veux. Une sorte de combo entre les multiples et simples fonctionnalités de select2 serait parfait. Aussi je me sers AngularJS comme la bibliothèque cliente

Combo/dropdown

Source

2013-02-28 terjetyl

J'ai trouvé Chosen (http://harvesthq.github.com/chosen/) être un très bon pour ces situations. Je l'ai utilisé avec bootstrap sur un nouveau projet sans problèmes majeurs.

Source

2013-03-01 01:13:04 Judo

peut pas voir que cela résout mon problème mieux que Select2 – terjetyl

angulaire-UI a une combobox basée sur Select2: Angular-UI

Source

2013-03-01 01:36:03 Sharondio

Merci. J'ai déjà vu cela mais c'est juste un wrapper autour de select2 donc il n'ajoute aucune fonctionnalité supplémentaire – terjetyl

Donc vous voulez un lien supplémentaire en bas pour "ajouter un nouveau client" et pas la possibilité d'ajouter ce que l'utilisateur a tapé dans le typeahead si ça n'existe pas? – Sharondio

Les deux. Dans mon cas, les options de menu déroulant sont des produits pour les lignes de facture. En cliquant sur "Ajouter un nouveau", je peux ajouter un nouveau produit dans un popup modal. Dans le cas où le client a juste besoin d'un produit jetable, il ajoute simplement la description manuellement. En sélectionnant un article dans la liste déroulante, le prix de la description et la TVA sont définis automatiquement – terjetyl

-1

enter image description here

Bien sûr, les éléments de menu peut être complétée de manière dynamique.

<!DOCTYPE html> 
<head> 
<title>Combobox Test</title> 
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css"> 
<script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> 

<style> 
body{ 
    padding:20px; 
} 
.dropdown-menu>li{ 
    cursor:pointer; 
} 
.dropdown-menu { 
    padding-left:2px; 
    right: auto; 
    top:23px 
} 
.combobox-item{ 
    color:#aaa; 
} 
.combobox-item:hover{ 
    color:#000; 
} 
</style> 

<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
    $(".combobox-item").unbind("click").click(function(e){ 
     var input = $(e.target).parents('li').children('input.combobox'); 
     if (e.target.className.indexOf("combobox-empty") == -1) 
      $(input).val(e.target.innerHTML.trim()).attr("placeholder", "enter something").focus(); 
     else 
      $(input).val("").attr("placeholder", "what other?").focus(); 
    }); 
}); 

</script> 

</head> 
<body> 

<ul class="nav"> 
    <li class="dropdown"> 
     <input type="text" class="combobox" placeholder="enter something" class="dropdown-toggle" data-toggle="dropdown"> 
     <ul class="dropdown-menu" role="menu" id="dropdown-menu"> 
      <li class="combobox-item combobox-empty">Other</li> 
      <li class="divider"></li> 
      <li class="combobox-item">Foo</li> 
      <li class="combobox-item">Bar</li> 
     </ul> 
    </li> 
</ul> 

</body> 
</html>

Source

2014-05-14 15:18:13 bbeaudoin

Downvote car cela n'a rien à voir avec AngularJS, qui est marqué dans la question (et comment j'ai trouvé la question grâce à une recherche). – krillgar

Est-ce que quelqu'un sait un contrôle de bootstrap compatible avec le bootstrap de Twitter/autosuggest?

Répondre

Questions connexes