Javascript-форум - Автопоиск совпадений при вводе и замена списка на новый

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Автопоиск совпадений при вводе и замена списка на новый (https://javascript.ru/forum/dom-window/51011-avtopoisk-sovpadenijj-pri-vvode-i-zamena-spiska-na-novyjj.html)

Автопоиск совпадений при вводе и замена списка на новый

Добрый вечер.

Допустим, есть поле ввода и список из марок машин, html:

<input type="text" maxlength="30" placeholder="Поиск..." id="search" />

<ul id="cars">
  <li><a href="#"><span class="brand">Alfa Romeo</span></a></li>
  <li><a href="#"><span class="brand">AC</span></a></li>
  <li><a href="#"><span class="brand">Alpina</span></a></li>
  <li><a href="#"><span class="brand">Bertone</span></a></li>
  <li><a href="#"><span class="brand">Briliance</span></a></li>
  <li><a href="#"><span class="brand">Baltijas Dzips</span></a></li>
  <li><a href="#"><span class="brand">Cadillac</span></a></li>
  ... и т.д. ...
</ul>

При наборе текста список машин должен меняться на список, названия которых совпадают с текстом в поле ввода. Если введена буква "а" - остаются только машины начинающие на "а", если добавляется вторая буква снова сортировка списка на совпадения из двух букв, и так далее.

Новый список создаётся из списка, который ниже под полем ввода, т.е. никаких аякс-запросов ненужно, на странице список уже есть.

Начал это дело реализовывать, но пока закончить не получается, js:

$(document).ready(function () {

  var cars_clone = $('#cars li').clone();
  var cars_box = $('#cars');
  var cars_list = $('#cars span.brand');
  
  $('#search').keyup(function(){

	var search = $('#search').val();
	
	if(search.length) {

        // а тут не знаю как быть))

	} else {
      cars_box.html(cars_clone);
    }

  });
});

Ну как вариант, не знаю как по производительности и "красивости"

var text = "Subaru";//текст запроса
$.each(cars_box,function(){
if (cars_box.text().substr(0,text.length).toLowerCase() == text.toLowerCase()) {
$(this).css('display','block')
}
else {
$(this).css('display','none')
}
})

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
	$('#search').keyup(function (){
		var val=this.value;
		$('#cars .brand:contains("'+val+'")').parents('li').show();
		$('#cars .brand:not(:contains("'+val+'"))').parents('li').hide();
	});
});
</script>
</head>
<body>
<input type="text" maxlength="30" placeholder="Поиск..." id="search" />
<ul id="cars">
  <li><a href="#"><span class="brand">Alfa Romeo</span></a></li>
  <li><a href="#"><span class="brand">AC</span></a></li>
  <li><a href="#"><span class="brand">Alpina</span></a></li>
  <li><a href="#"><span class="brand">Bertone</span></a></li>
  <li><a href="#"><span class="brand">Briliance</span></a></li>
  <li><a href="#"><span class="brand">Baltijas Dzips</span></a></li>
  <li><a href="#"><span class="brand">Cadillac</span></a></li>
</ul>
</body>
</html>

благодарю за примеры, чего-то я на счёт скрыть/показать не догадался, зачем-то клонировать стал))

ksa, :contains он регистрозависимый, не совсем подходит (

в примерах выше, совпадения ищутся по всей строке, т.е. ввёл букву "а" то находятся все слова где эта буква присутствует,

можно ли сделать так, чтобы она искалась только в начале строки? при этом не ограничивая кол-во символов поиска в строке?

Цитата:

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

:contains он регистрозависимый, не совсем подходит

Цитата:

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

в примерах выше, совпадения ищутся по всей строке, т.е. ввёл букву "а" то находятся все слова где эта буква присутствует,

можно ли сделать так, чтобы она искалась только в начале строки?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function (){
	$('#search').keyup(function (){
		var val=this.value;
		var re=new RegExp('^'+val,'i');
		$('#cars .brand').each(function (){
			$(this).parents('li').toggle(re.test($(this).text()));
		});
	});
});
</script>
</head>
<body>
<input type="text" maxlength="30" placeholder="Поиск..." id="search" />
<ul id="cars">
  <li><a href="#"><span class="brand">Alfa Romeo</span></a></li>
  <li><a href="#"><span class="brand">AC</span></a></li>
  <li><a href="#"><span class="brand">Alpina</span></a></li>
  <li><a href="#"><span class="brand">Bertone</span></a></li>
  <li><a href="#"><span class="brand">Briliance</span></a></li>
  <li><a href="#"><span class="brand">Baltijas Dzips</span></a></li>
  <li><a href="#"><span class="brand">Cadillac</span></a></li>
</ul>
</body>
</html>

Регистронезависимый поиск "по начинается"...

да это то что надо, благодарю :thanks:

Апдейт ) Забыл вместо cars_box поставить $(this)

var text = "Subaru";//текст запроса
$.each(cars_box,function(){
if ($(this).text().substr(0,text.length).toLowerCase() == text.toLowerCase()) {
$(this).css('display','block')
}
else {
$(this).css('display','none')
}
})

datalist не канает?

Цитата:

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

datalist не канает?

Канает если хочешь чтоб твои пользователи имели проблемы с его использованием

Какие именно проблемы?