添加複選框自動完成-jQuery

我正在處理這段代碼，並且我使用jQuery UI進行自動完成。現在我需要一些幫助來添加複選框，以便我可以做多個選擇，並在逗號分隔的情況下反映在我的字段中。我發現了一個插件，我想創造什麼，但我不希望使用任何插件[我的工作] http://www.igniteui.com/combo/selection-and-checkboxes 添加複選框自動完成-jQuery

<script src="js/jquery-1.11.1.min.js"></script> 
<script src="js/jquery-ui.js"></script> 
<link rel="stylesheet" href="js/jquery-ui.css"> 
<body> 
    <input id="condition" type="text" placeholder="condition"> 
</body> 
<script> 
    var availableTags = [ 
       "ActionScript", 
       "AppleScript", 
       "Asp", 
       "BASIC", 
       "C", 
       "C++", 
       "Clojure", 
       "COBOL", 
       "ColdFusion", 
       "Erlang", 
       "Fortran", 
       "Groovy", 
       "Haskell", 
       "Java", 
       "JavaScript", 
       "Lisp", 
       "Perl", 
       "PHP", 
       "Python", 
       "Ruby", 
       "Scala", 
       "Scheme" 
    ]; 

    $(document).ready(function() { 
     $('#condition').autocomplete({ 
      source: availableTags, 
      minLength: 0 
     }).focus(function() { 
      try { 
       $(this).autocomplete("search"); 
      } 
      catch (e) { 

      } 
     }); 
    }); 
</script>

來源

2015-06-19 Mokshed Kaushik

***我不希望使用任何插件，對我的工作***，那麼爲什麼使用jQuery？ – Arvind

由第三方創建的任何插件都會創建依賴關係，它也會與jquery ui相沖突。我不希望它使任何未來的工作或擴展受到任何插件的影響 –

您正在發佈重複項：http://stackoverflow.com/questions/30913983/adding-checkbox-for-multiple-selection-in-autocomplete –

基本上，你首先需要改變的jQuery自動完成的輸出。

像這樣的事情

$('yourElement').autocomplete({ /* autocomplete config here */ }).data("autocomplete")._renderItem = function(ul, item) { 
    var checked = ($.inArray(item.label, selectedItems) >= 0 ? 'checked' : ''); 

    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append('<a><input type="checkbox" ' + checked + '/>' + item.label + '</a>') 
     .appendTo(ul); 
};

然後你要拾取的元素存儲在一個變量（數組）

$('#yourElement').autocomplete({ 
    // Configs 
    select:function(event, ui) {// Onselect event 
     // Don't forget to check if the item is already in the array 
     // and if it's the case to remove it 

     selectedItems.push(ui.item.label); 
    } 
});

就拿不是selectItems的是一個數組，你需要在你的腳本中定義

你可以在這個JSFiddle上看到這個代碼會在自動完成名單

希望它會幫助你有點

來源

2015-06-19 19:00:32 DFayet

添加複選框自動完成-jQuery

回答

相關問題