はどのように検索可能なマルチセレクターのドロップダウンメニューを作成しようとしています

Question

$('.dropdown-container') 
 
\t .on('click', '.dropdown-button', function() { 
 
    \t $('.dropdown-list').toggle(); 
 
\t }) 
 
\t .on('input', '.dropdown-search', function() { 
 
    \t var target = $(this); 
 
    \t var search = target.val().toLowerCase(); 
 
    
 
    \t if (!search) { 
 
      $('li').show(); 
 
      return false; 
 
     } 
 
    
 
    \t $('li').each(function() { 
 
     \t var text = $(this).text().toLowerCase(); 
 
      var match = text.indexOf(search) > -1; 
 
      $(this).toggle(match); 
 
     }); 
 
\t }) 
 
\t .on('change', '[type="checkbox"]', function() { 
 
    \t var numChecked = $('[type="checkbox"]:checked').length; 
 
    \t $('.quantity').text(numChecked || 'Any'); 
 
\t }); 
 
// JSON of States for demo purposes 
 
var usStates = [ 
 
    { name: 'ALABAMA', abbreviation: 'AL'}, 
 
    { name: 'ALASKA', abbreviation: 'AK'}, 
 
    { name: 'AMERICAN SAMOA', abbreviation: 'AS'}  
 
]; 
 
// <li> template 
 
var stateTemplate = _.template(
 
    '<li>' + 
 
    \t '<input name="<%= abbreviation %>" type="checkbox">' + 
 
    \t '<label for="<%= abbreviation %>"><%= capName %></label>' + 
 
    '</li>' 
 
); 
 
// Populate list with states 
 
_.each(usStates, function(s) { 
 
    s.capName = _.startCase(s.name.toLowerCase()); 
 
    $('ul').append(stateTemplate(s)); 
 
});

文字列のクエリによって作成されたリチウムでクラス/ IDを使用します。しかし、このjsファイルを実行すると、HTMLのすべてのliが変更されます。どのようにjsを1つのdivだけに指定できますか？だから、それは李やulの残りの部分を混乱させません。下の写真のように。

Answer 1

変化にあなたの選択：

$('.dropdown-container .dropdown-list ul').append(stateTemplate(s)); 

とのために李さんだけでなく

$('.dropdown-container .dropdown-list ul li').each(function() {//....