有人知道一個twitter bootstrap兼容的combobox/autosuggest控件嗎？

我需要一個引導兼容的下拉/自動完成控件，我可以附加到文本字段並打開預先填充的選項，當我將光標置於文本框內時。在底部應該有一個選項來添加t.ex的新項目。點擊打開模式對話框。用戶還應該能夠像使用組合框一樣輸入他自己的文本。這是我見過很多網站使用的功能，它的工作原理非常好。有人知道一個twitter bootstrap兼容的combobox/autosuggest控件嗎？

更具體地說，我的用例是填寫發票，並允許用戶通過點擊底部的「添加新的」鏈接添加新產品。隨後打開一個模式彈出窗口，允許用戶添加詳細信息。當模式關閉並且產品被保存以供發票後續時間時，設置描述，價格和增值稅。另外，如果用戶選擇預填充線路之一，則產品將爲他設置。如果是一次性產品，用戶只需輸入描述並手動添加價格和增值稅。

我見過的最接近的是select2，但它似乎並沒有達到我想要的。 select2中的多重和單一功能之間的一種組合將是完美的。另外我使用angularjs作爲客戶端庫

Combo/dropdown

來源

2013-02-28 terjetyl

我發現揀選（http://harvesthq.github.com/chosen/）是一個針對這些情況非常好。我一直在一個新的項目上使用bootstrap，沒有大問題。

來源

2013-03-01 01:13:04 Judo

看不到，這比解決我的問題select2 – terjetyl 2013-03-01 01:16:00

角UI具有基於選擇二組合框：Angular-UI

來源

2013-03-01 01:36:03 Sharondio

謝謝。我已經看到了，但它只是一個圍繞select2的包裝，所以它不會添加任何附加功能 – terjetyl 2013-03-01 01:39:05

因此，您需要在底部添加一個鏈接來「添加新客戶端」，而不是將用戶鍵入的任何內容添加到「它不存在？ – Sharondio 2013-03-01 18:37:54

兩者。在我的具體情況下，下拉選項是發票行的產品。通過點擊「添加新的」，我可以在模態彈出窗口中添加新產品。如果客戶只需要一次性產品，他只需手動添加說明。通過在下拉菜單中選擇一個項目，描述價格和增值稅將自動設置 – terjetyl 2013-03-01 18:47:27

-1

enter image description here

當然的菜單項可以動態填充。

<!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>

來源

2014-05-14 15:18:13 bbeaudoin

Downvote，因爲這與AngularJS沒有任何關係，AngularJS在問題中進行了標記（以及我如何通過搜索發現問題）。 – krillgar 2014-06-12 18:44:55

有人知道一個twitter bootstrap兼容的combobox/autosuggest控件嗎？

回答

相關問題