Найти и переместить элемент

184

02 февраля 2020, 22:50

Есть форма ввода:

<input type="text" id="search">

И есть объекты:

<div data-name="BBBs"></div>
<div data-name="NNNFHK"></div>
<div data-name="BBB"></div>
<div data-name="AaA"></div>
<div data-name="AAA"></div>
<div data-name="AAA"></div>

Пользователь к примеру вводит в форму букву а. Как произвести поиск по элементам (независимо от регистра (запрос и data-name перевести в один регистр)) и все удовлетворяющие элементы переместить на первые позиции, чтобы получилось так:

<div data-name="AaA"></div>
<div data-name="AAA"></div>
<div data-name="AAA"></div>
<div data-name="BBBs"></div>
<div data-name="NNNFHK"></div>
<div data-name="BBB"></div>

Answer 1

$("#search").on("keyup", function() { 
  $("div[data-name]").attr("find", function() { 
    return $(this).data("name").toLowerCase(); 
  }); 
  $("div[find^='" + $(this).val().toLowerCase() + "']").insertBefore("div[data-name]:first"); 
  $("div[data-name]").removeAttr("find"); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="text" id="search"> 
<div data-name="BBBs">BBBs</div> 
<div data-name="NNNFHK">NNNFHK</div> 
<div data-name="BBB">BBB</div> 
<div data-name="AaA">AaA</div> 
<div data-name="AAA">AAA</div> 
<div data-name="AAA">AAA</div>

Answer 2

*Не стал писать на "change", чтобы у вас вся страница не пересортировалась лишний раз

Хотел на чистом JS, но вместо prepend();

content.insertBefore(sort[u], content.firstChild);

не сработало тут... и не знаю почему))

document.getElementById('ok').addEventListener('click',function(){...});

А вот это, JS-аналог $('#ok').on('click',function(){...});

А за "независимо от регистра" отвечает букаффка 'i' в регулярном выражении (ignore case)

document.getElementById('ok').addEventListener('click',function(){ 
  const s = document.getElementById('search'); 
  const sort = document.getElementsByClassName('sort'); 
  for( let u=0; u < sort.length; u++){ 
    let reg = new RegExp(s.value,'ig'); 
    if( sort[u].dataset.name.match( reg ) ){  
      $('#content').prepend(sort[u]); 
    } 
  }; 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input type="text" id="search"><button id="ok">Ok</button> 
<div id="content"> 
  <div class="sort" data-name="BBBs">BBBs</div> 
  <div class="sort" data-name="NNNFHK">NNNFHK</div> 
  <div class="sort" data-name="BBB">BBB</div> 
  <div class="sort" data-name="AaA">AaA</div> 
  <div class="sort" data-name="AAA">AAA</div> 
  <div class="sort" data-name="AAA">AAA</div> 
</div>

Answer 3

jquery:

$('#search').on('change', function(){
    var search_text = $(this).val();
    $('[data-name]').each(function(){
        var elem_text = $(this).attr('data-name');
        var reg = new RegExp(search_text, 'gi');
        if( ( elem_text.search(reg) != -1) ){
            $('.data').prepend($(this));
        }
    });
});

html:

<input type="text" id="search">
<div class="data">
    <div data-name="BBBs">BBBs</div>
    <div data-name="NNNFHK">NNNFHK</div>
    <div data-name="BBB">BBB</div>
    <div data-name="AaA">AaA</div>
    <div data-name="AAA">AAA</div>
    <div data-name="AAA">AAA</div>
</div>

Answer 4

Вот что у меня получилось:

<input type="text" id="search">
<div id="names-block">
    <div class="names" data-name="BBBs">BBBs</div>
    <div class="names" data-name="NNNFHK">NNNFHK</div>
    <div class="names" data-name="BBB">BBB</div>
    <div class="names" data-name="AaA">AaA</div>
    <div class="names" data-name="AAA">AAA</div>
    <div class="names" data-name="AAA">AAA</div>
</div>

И js, не забываем подключить jquery

$('#search').change(function(){
    $('.names').each(function(){
        if(stristr($(this).data("name"),$('#search').val()) != false){
            $(this).prependTo('#names-block');
        }
    });
});
function stristr( haystack, needle, bool ) {
    var pos = 0;
    pos = haystack.toLowerCase().indexOf( needle.toLowerCase() );
    if( pos == -1 ){
        return false;
    } else{
        if( bool ){
            return haystack.substr( 0, pos );
        } else{
            return haystack.slice( pos );
        }
    }
}