jQueryを使用したdata-attrに基づくDOMのフィルタ要素

Question

jQueryのオートコンプリートを使用してこれらの項目をデータ名に従ってフィルタリングしようとしていますが、ちょっと残念です。一般に、入力フィールドにテキストを入力し始め、一致しない場合はDOMからアイテムを削除したいと考えています。どんな助けも大歓迎です。

ペン：https://codepen.io/anon/pen/aVGjay

$(function() { 
 
     var item = $(".item"); 
 
    
 
     $.each(item, function(index, value) { 
 
     console.log($(value).attr("data-name")); 
 
     var everyItem = $(value).attr("data-name"); 
 
     }); 
 
    
 
     $("#my-input").autocomplete({ 
 
     source: everyItem, //? 
 
     minLength: 1, 
 
     search: function(oEvent, oUi) { 
 
      // get current input value 
 
      var sValue = $(oEvent.target).val(); 
 
      // init new search array 
 
      var aSearch = []; 
 
      // for each element in the main array 
 
      $(everyItem).each(function(iIndex, sElement) { 
 
      // if element starts with input value 
 
      if (sElement.substr(0, sValue.length) === sValue) { 
 
       // add element 
 
       aSearch.push(sElement); 
 
      } 
 
      }); 
 
      // change search array 
 
      $(this).autocomplete("option", "source", aSearch); 
 
     } 
 
     }); 
 
    }); 
 
    
 

.items { 
 
     width: 200px; 
 
    } 
 
    
 
    .item { 
 
     background-color: red; 
 
     margin-top: 2px; 
 
    }

<input type="text" placeholder="Filter items" id="my-input"> 
 
    <div class="items"> 
 
     <div class="item" data-name="one">one</div> 
 
     <div class="item" data-name="two">two</div> 
 
     <div class="item" data-name="three">three</div> 
 
    <div class="item" data-name="four">four</div> 
 
</div> 
 
    
 

Answer 1

それはないから、それが提供されるオブジェクトまたはリモートデータソースからフィルタリングオプションのリストを構築するためのものだとして、このためにオートコンプリートを使用するには少し奇妙ですDOMコンテンツ

あなたは、順番に.item要素を通過すると、一致data-name属性を持つものをフィルタリングするために、正規表現を使用し、それらを表示する#my-inputに入力されたイベントリスナーを取り付けることにより、機能性にこのような何かを自分で構築することができます。

を

$(function() { 
 
    var $items = $(".item"); 
 

 
    $('#my-input').on('input', function() { 
 
    var val = this.value; 
 
    $items.hide().filter(function() { 
 
     return new RegExp('^' + val, 'gi').test($(this).data('name')); 
 
    }).show(); 
 
    }); 
 
});

.items { 
 
    width: 200px; 
 
} 
 

 
.item { 
 
    background-color: red; 
 
    margin-top: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" placeholder="Filter items" id="my-input"> 
 
<div class="items"> 
 
    <div class="item" data-name="one">one</div> 
 
    <div class="item" data-name="two">two</div> 
 
    <div class="item" data-name="three">three</div> 
 
    <div class="item" data-name="four">four</div> 
 
</div>