Javascript-форум - Jquery contains поиск в div

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Jquery contains поиск в div (https://javascript.ru/forum/jquery/65834-jquery-contains-poisk-v-div.html)

Jquery contains поиск в div

Данный код всегда будет работать, если есть хотя бы 1 символ в строке. Как можно изменить код, чтобы при вводе каждой буквы изменялся результат поиска?

Код:

<div class="content">

 <form class="search">

   <div class="search-input">

     <input type="search-item" id="suggest"><a href="#" class="search-clear"></a>

   </div><a href="#" class="search-cancel">Отмена</a>

 </form>

 <div class='list-block no-margin'>

  <ul>

   <li>

    <a href='#' class='item-link item-content'>

     <div class='item-inner'>

      <div class='item-title item-subtitle'>Текст, который будет найден</div>

     </div>

    </a>

   </li>

  </ul>

 </div>

</div>

$('#suggest').bind('keyup onchange',function(){
  var Search = $('#suggest').val();
  var Result = $(".list-block .item-link:contains("+Search+")");
  console.log("Кол-во результатов:" + Result.length);
  console.log("Кол-во символов в input:" + Search.length);
  for(var i = 0; i < Result.length; i++){
    if(Search != '' && Search.length > 0){
      $(".list-block .item-link:contains("+Search+")").addClass('on');
      $(".list-block .item-link").hide();
      $('.on').show();
    } else {
      $(".list-block .item-link:contains("+Search+")").removeClass('on');
      $(".list-block .item-link").show();
    }
  }
})

qumo,
надо событие 'input' использовать вместо 'keyup' и 'onchange'.

Спасибо за упрощение кода=) А по самому сабжу есть что?=)

qumo,
1) Почему .bind? вместо .bind использовать .on
2)

Search != '' && Search.length > 0

Можно ж просто

Search !== ''

Но если тебе нужна защита от ввода пробелов то надо регулярное выражение и тестить инпут.val()
3) Вместо родителя (то есть лист-блок)

$(".list-block .item-link:contains("+Search+")")

Можно использовать контекст

$('.item-link:contains('+Search+')', '.list-block')

Спасибо за информацию=) Сейчас мне главное, чтобы при вводе каждой буквы изменялся результат поиска=) Остальное не критично=)

Цитата:

Сообщение от qumo

чтобы при вводе каждой буквы изменялся результат поиска

http://javascript.ru/forum/jquery/64...tml#post425047

по ссылке нужный вам скрипт, достаточно заменить селекторы на ваши

qumo,
Ты достал меня

$('#suggest').on('input', function() {
  var search = $('#suggest').val();
  if (search !== '') {
    $('.item-title').not(':contains('+search+')').parents('li').hide();
    $('.item-title:contains('+search+')').parents('li').show();
  }
  else {
  	$('.item-title').parents('li').show();
  }
});

И это.. контекст можно было в старых jquery указывать(на которых я сидел) - сейчас уже нет

Спасибо, ребята, за помощь=)