自動完成與多選外部div

我正在嘗試使用多選的自動完成功能。來回我是使用http://harvesthq.github.io/chosen/ ..這是真棒插件，但我需要一些不同的方式輸出...自動完成與多選外部div

1st我需要在一個單獨的div顯示選定的項目。目前它顯示在文本框中。第二我要添加選項全選和全部清除。我看到他們如何在那裏添加搜索選項。在那裏JS文件他們做

this.container.html('<a class="chosen-single chosen-default" tabindex="-1"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" /></div><ul class="chosen-results"></ul></div>')

所以我覺得，如果我們可以添加一個DIV有兩個按鈕，選擇和全部清除，然後如果我們能提供的功能有沒有全選和清除，則這將是工作。也當我選擇所有，並清除所有，然後它會影響外部div我想顯示所有選擇列表。

下面

是代碼

<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select-width" tabindex="16"> 
     <option value=""></option> 
     <option>American Black Bear</option> 
     <option>Asiatic Black Bear</option> 
     <option>Brown Bear</option> 
     <option>Giant Panda</option> 
     <option>Sloth Bear</option> 
     <option>Sun Bear</option> 
     <option>Polar Bear</option> 
     <option>Spectacled Bear</option> 
     </select>

選擇列表波紋管

var config = { 

    '.chosen-select-width'  : {width:"75%"} 
} 
for (var selector in config) { 
    $(selector).chosen(config[selector]); 
}

演示http://jsfiddle.net/Gqmhs/

選的文檔文件的URL http://harvesthq.github.io/chosen/options.html

來源

2013-12-18 Accore LTD

Buddie，我二叔d做到這一點：http://jsfiddle.net/JhRL5/1/
但我很累，我現在無法完成。但我相信這段代碼會幫助你很多。

var config = { 
     '.chosen-select-width'  : {width:"75%"} 
    } 
    for (var selector in config) { 
     $(selector).chosen(config[selector]); 
    } 

$(document).ready(function(){ 

    $("#test").change(function(){ 
     var a = $("#test :selected").text(); 
     $("#selectedlist").html(a); 
    }); 

    $("#s-all").click(function(){ 

     var a = $("#test option"); 

     $.each(a, function(i, val) { 
      $(val).change(); 
     }); 

     var b = $("#test option").text(); 
     $("#selectedlist").html(b); 

    }); 

    $("#c-all").click(function(){ 

     $("#test option:selected").removeAttr("selected"); 

     var a = $("#test :selected").text(); 
     $("#selectedlist").html(a); 
     $(".chosen-choices").find("li.search-choice").remove(); 

    }); 

});

來源

2013-12-18 04:25:48

哇..這真棒... @rafaelsoufraz ..我正在嘗試自己休息..我知道你永遠不會完成.. 現在你的代碼有一些問題。就像如果我點擊清除所有然後清除，但從選擇所有都禁用..意味着不更新，下一步在div我們顯示所選項目需要X sybmol每個然後我們可以從那裏刪除，我也希望選擇所有按鈕放首先在內部選擇框...讓我試試..你也試試，如果你有時間..我不是很好的js .. –

主要我想添加/顯示在div中，就像現在在文本框中添加相同的方式..喜歡與X.在代碼模式我看到代碼是這樣的 '

棕熊

' –

-1

我已經取得了你真正想要的。這裏是：

[http://jsfiddle.net/JhRL5/16/][1]

首先，從下拉菜單中選擇一個項目後，文本框會立即變空白。其次，所選項目顯示在所有項目（刪除）下的div中：但是在這裏，我卡住了。如果我選擇項目號1,3,5，那麼它工作正常，但如果我選擇1，5，3它出現錯誤的最後一個。實際上，我需要向前移動的是當前選定的項目名稱（以前未選擇的項目）。

來源

2013-12-20 02:58:49 user1911703

自動完成與多選外部div

回答

相關問題