Форум

Кефирчик · #1 (**permalink**) 31.08.2016, 18:09

Добрый день!
Есть страница с набором элементов. Надо осуществить поиск по этим элементам. Проблема в том что при вводе некоторых букв выводятся не все элементы с этой буквой. Например при вводе буквы "к" не выводятся слова "кот", "комод" и "кухня". Прошу помощи!

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

рони · #2 (**permalink**) 31.08.2016, 18:33

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

Кефирчик · #3 (**permalink**) 31.08.2016, 19:17

рони,
не очень понял) Можно по подробнее.

рони · #4 (**permalink**) 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>

Кефирчик · #5 (**permalink**) 31.08.2016, 21:07

рони,
Спасибо!

warren buffet · #6 (**permalink**) 01.09.2016, 06:08

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

Яростный Меч · #7 (**permalink**) 01.09.2016, 10:12

наверно, проще убрать g

var pole = new RegExp(""+$(this).val()+"",'i');

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

Sigizmund2012 · #8 (**permalink**) 01.09.2016, 10:57

Сообщение от warren buffet

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

Сыровата пока фича, но прикольная. http://caniuse.com/#search=datalist

Manyasha · #9 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript