0

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

<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>

4 ответа 4

1

*Не стал писать на "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>

0

$("#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>

0

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>
-1

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

<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 );
        }
    }
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.