Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.08.2016, 18:09
Новичок на форуме
Отправить личное сообщение для Кефирчик Посмотреть профиль Найти все сообщения от Кефирчик
 
Регистрация: 31.08.2016
Сообщений: 3

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>
Ответить с цитированием
  #2 (permalink)  
Старый 31.08.2016, 18:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Кефирчик,
обнули индекс начала поиска pole перед строкой 7
Ответить с цитированием
  #3 (permalink)  
Старый 31.08.2016, 19:17
Новичок на форуме
Отправить личное сообщение для Кефирчик Посмотреть профиль Найти все сообщения от Кефирчик
 
Регистрация: 31.08.2016
Сообщений: 3

рони,
не очень понял) Можно по подробнее.
Ответить с цитированием
  #4 (permalink)  
Старый 31.08.2016, 19:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Кефирчик,
<!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
Новичок на форуме
Отправить личное сообщение для Кефирчик Посмотреть профиль Найти все сообщения от Кефирчик
 
Регистрация: 31.08.2016
Сообщений: 3

рони,
Спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 01.09.2016, 06:08
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Можете тебе Кефирчик это понравится https://developer.mozilla.org/en/doc...ement/datalist
Ответить с цитированием
  #7 (permalink)  
Старый 01.09.2016, 10:12
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

наверно, проще убрать g
var pole = new RegExp(""+$(this).val()+"",'i');


непонятно, зачем здесь "глобальный" регекс
Ответить с цитированием
  #8 (permalink)  
Старый 01.09.2016, 10:57
Аватар для Sigizmund2012
Профессор
Отправить личное сообщение для Sigizmund2012 Посмотреть профиль Найти все сообщения от Sigizmund2012
 
Регистрация: 16.07.2014
Сообщений: 267

Сообщение от warren buffet Посмотреть сообщение
Можете тебе Кефирчик это понравится https://developer.mozilla.org/en/doc...ement/datalist
Сыровата пока фича, но прикольная. http://caniuse.com/#search=datalist
Ответить с цитированием
  #9 (permalink)  
Старый 01.09.2016, 11:41
Профессор
Отправить личное сообщение для Manyasha Посмотреть профиль Найти все сообщения от Manyasha
 
Регистрация: 21.09.2015
Сообщений: 196

еще один вариант:
<!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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
скрипт работает в IE через раз jsVAN Internet Explorer 2 10.03.2011 03:27
Регвыр /\s+-\s+/g срабатывает через один в строчке - - - - - балерун Общие вопросы Javascript 2 25.01.2011 16:55
Регулярные выражения работают через раз San4ezy Общие вопросы Javascript 5 05.10.2010 01:50
не срабатывает на второй раз ajax[отправка формы] vovs jQuery 5 21.09.2010 12:12
Регулярка работает через раз. Andrej_2 Общие вопросы Javascript 17 17.05.2009 15:15