Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   RegExp .test срабатывает через раз (https://javascript.ru/forum/dom-window/64723-regexp-test-srabatyvaet-cherez-raz.html)

Кефирчик 31.08.2016 18:09
RegExp .test срабатывает через раз
 
Добрый день!
Есть страница с набором элементов. Надо осуществить поиск по этим элементам. Проблема в том что при вводе некоторых букв выводятся не все элементы с этой буквой. Например при вводе буквы "к" не выводятся слова "кот", "комод" и "кухня". Прошу помощи!
<html>
<head>
  <title>bla</title>
  <meta charset="UTF-8">
</head>
<body>
	
	<div class="seachbox">
	<input type="text" class="search">
	<p class="seachitem" style="display: block;">нг</p>
	<p class="seachitem" style="display: block;">подарки</p>
	<p class="seachitem" style="display: block;">белый</p>
	<p class="seachitem" style="display: block;">ёлка</p>
	<p class="seachitem" style="display: block;">шишка</p>
	<p class="seachitem" style="display: block;">цветы</p>
	<p class="seachitem" style="display: block;">горшок</p>
	<p class="seachitem" style="display: block;">стул</p>
	<p class="seachitem" style="display: block;">прованс</p>
	<p class="seachitem" style="display: block;">обои</p>
	<p class="seachitem" style="display: block;">зелень</p>
	<p class="seachitem" style="display: block;">овечка</p>
	<p class="seachitem" style="display: block;">кот</p>
	<p class="seachitem" style="display: block;">камень</p>
	<p class="seachitem" style="display: block;">природный</p>
	<p class="seachitem" style="display: block;">девушка</p>
	<p class="seachitem" style="display: block;">комод</p>
	<p class="seachitem" style="display: block;">темно</p>
	<p class="seachitem" style="display: block;">граффити</p>
	<p class="seachitem" style="display: block;">светильник</p>
	<p class="seachitem" style="display: block;">зима</p>
	<p class="seachitem" style="display: block;">подушка</p>
	<p class="seachitem" style="display: block;">кухня</p>
	<p class="seachitem" style="display: block;">город</p>
	<p class="seachitem" style="display: block;">свечи</p>
	<p class="seachitem" style="display: block;">дети</p>
	<p class="seachitem" style="display: block;">комната</p>
	</div>
	<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
	<script type="text/javascript">


$(document).on('ready', function() {
	$(".seachitem").hide();
	$('input.search').keyup(function(){
		pole = new RegExp(""+$(this).val()+"",'ig')
		$(".seachitem").hide();
		for (var i = 0; i != $(".seachitem").length; i++) {
			if (pole.test($(".seachitem").eq(i).html())) {
				$(".seachitem").eq(i).show();
			}
		}
		
	});
    });

</script>
</body>
</html>

рони 31.08.2016 18:33
Кефирчик,
обнули индекс начала поиска pole перед строкой 7

Кефирчик 31.08.2016 19:17
рони,
не очень понял) Можно по подробнее.

рони 31.08.2016 19:30
Кефирчик,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(document).on('ready', function() {
  $(".seachitem").hide();
  $('input.search').keyup(function(){
    var pole = new RegExp(""+$(this).val()+"",'ig');
    $(".seachitem").hide();
    for (var i = 0; i != $(".seachitem").length; i++) {
      pole.lastIndex = 0;
      if (pole.test($(".seachitem").eq(i).html())) {
        $(".seachitem").eq(i).show();
      }
    }

  });
    });

  </script>
</head>

<body>
<div class="seachbox">
  <input type="text" class="search">
  <p class="seachitem" style="display: block;">нг</p>
  <p class="seachitem" style="display: block;">подарки</p>
  <p class="seachitem" style="display: block;">белый</p>
  <p class="seachitem" style="display: block;">ёлка</p>
  <p class="seachitem" style="display: block;">шишка</p>
  <p class="seachitem" style="display: block;">цветы</p>
  <p class="seachitem" style="display: block;">горшок</p>
  <p class="seachitem" style="display: block;">стул</p>
  <p class="seachitem" style="display: block;">прованс</p>
  <p class="seachitem" style="display: block;">обои</p>
  <p class="seachitem" style="display: block;">зелень</p>
  <p class="seachitem" style="display: block;">овечка</p>
  <p class="seachitem" style="display: block;">кот</p>
  <p class="seachitem" style="display: block;">камень</p>
  <p class="seachitem" style="display: block;">природный</p>
  <p class="seachitem" style="display: block;">девушка</p>
  <p class="seachitem" style="display: block;">комод</p>
  <p class="seachitem" style="display: block;">темно</p>
  <p class="seachitem" style="display: block;">граффити</p>
  <p class="seachitem" style="display: block;">светильник</p>
  <p class="seachitem" style="display: block;">зима</p>
  <p class="seachitem" style="display: block;">подушка</p>
  <p class="seachitem" style="display: block;">кухня</p>
  <p class="seachitem" style="display: block;">город</p>
  <p class="seachitem" style="display: block;">свечи</p>
  <p class="seachitem" style="display: block;">дети</p>
  <p class="seachitem" style="display: block;">комната</p>
  </div>


</body>
</html>

Кефирчик 31.08.2016 21:07
рони,
Спасибо!

warren buffet 01.09.2016 06:08
Можете тебе Кефирчик это понравится https://developer.mozilla.org/en/doc...ement/datalist

Яростный Меч 01.09.2016 10:12
наверно, проще убрать g
var pole = new RegExp(""+$(this).val()+"",'i');


непонятно, зачем здесь "глобальный" регекс

Sigizmund2012 01.09.2016 10:57
Цитата:
Сообщение от warren buffet (Сообщение 427324)
Можете тебе Кефирчик это понравится https://developer.mozilla.org/en/doc...ement/datalist
Сыровата пока фича, но прикольная. http://caniuse.com/#search=datalist

Manyasha 01.09.2016 11:41
еще один вариант:
<!DOCTYPE html>
 <html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(document).on('ready', function() {
  $(".seachitem").hide();
  $('input.search').keyup(function(){
    $(".seachitem").hide();
	$(".seachitem:contains(" + $(this).val().toLowerCase() + ")").show();
  });
});
  </script>
</head>
 
<body>
<div class="seachbox">
  <input type="text" class="search">
  <p class="seachitem" style="display: block;">нг</p>
  <p class="seachitem" style="display: block;">подарки</p>
  <p class="seachitem" style="display: block;">белый</p>
  <p class="seachitem" style="display: block;">ёлка</p>
  <p class="seachitem" style="display: block;">шишка</p>
  <p class="seachitem" style="display: block;">цветы</p>
  <p class="seachitem" style="display: block;">горшок</p>
  <p class="seachitem" style="display: block;">стул</p>
  <p class="seachitem" style="display: block;">прованс</p>
  <p class="seachitem" style="display: block;">обои</p>
  <p class="seachitem" style="display: block;">зелень</p>
  <p class="seachitem" style="display: block;">овечка</p>
  <p class="seachitem" style="display: block;">кот</p>
  <p class="seachitem" style="display: block;">камень</p>
  <p class="seachitem" style="display: block;">природный</p>
  <p class="seachitem" style="display: block;">девушка</p>
  <p class="seachitem" style="display: block;">комод</p>
  <p class="seachitem" style="display: block;">темно</p>
  <p class="seachitem" style="display: block;">граффити</p>
  <p class="seachitem" style="display: block;">светильник</p>
  <p class="seachitem" style="display: block;">зима</p>
  <p class="seachitem" style="display: block;">подушка</p>
  <p class="seachitem" style="display: block;">кухня</p>
  <p class="seachitem" style="display: block;">город</p>
  <p class="seachitem" style="display: block;">свечи</p>
  <p class="seachitem" style="display: block;">дети</p>
  <p class="seachitem" style="display: block;">комната</p>
  </div>
</body>
</html>


Часовой пояс GMT +3, время: 16:16.