Javascript.RU

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

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

Допустим, есть поле ввода и список из марок машин, 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);
    }

  });
});
Ответить с цитированием
  #2 (permalink)  
Старый 21.10.2014, 08:45
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Ну как вариант, не знаю как по производительности и "красивости"
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')
}
})

Последний раз редактировалось krasovsky, 21.10.2014 в 08:47.
Ответить с цитированием
  #3 (permalink)  
Старый 21.10.2014, 10:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

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

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 21.10.2014, 13:05
Интересующийся
Отправить личное сообщение для desertFox Посмотреть профиль Найти все сообщения от desertFox
 
Регистрация: 29.08.2013
Сообщений: 20

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


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

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

можно ли сделать так, чтобы она искалась только в начале строки? при этом не ограничивая кол-во символов поиска в строке?
Ответить с цитированием
  #5 (permalink)  
Старый 21.10.2014, 13:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от 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>

Регистронезависимый поиск "по начинается"...
Ответить с цитированием
  #6 (permalink)  
Старый 21.10.2014, 13:56
Интересующийся
Отправить личное сообщение для desertFox Посмотреть профиль Найти все сообщения от desertFox
 
Регистрация: 29.08.2013
Сообщений: 20

да это то что надо, благодарю
Ответить с цитированием
  #7 (permalink)  
Старый 22.10.2014, 08:31
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Апдейт ) Забыл вместо 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')
}
})
Ответить с цитированием
  #8 (permalink)  
Старый 22.10.2014, 11:24
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

datalist не канает?
Ответить с цитированием
  #9 (permalink)  
Старый 22.10.2014, 11:45
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Сообщение от kostyanet
datalist не канает?
Канает если хочешь чтоб твои пользователи имели проблемы с его использованием
Ответить с цитированием
  #10 (permalink)  
Старый 22.10.2014, 15:08
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Какие именно проблемы?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Реализация скрипта. Изменение дерева при вводе каждой следующей буквы слова. WDha AJAX и COMET 0 04.11.2009 00:19
Проверка имени пользователя при вводе st1512 AJAX и COMET 1 07.09.2009 09:58
Скрипт по добавлению списка баз данных при входе в систему! Demidovstan Сайт Javascript.ru 3 13.05.2009 17:36
раскрывать/скрывать <td> при выборе определенного элемента списка zip Элементы интерфейса 2 19.01.2009 13:58
Подбор вариантов при вводе. SergeiAzarov Общие вопросы Javascript 1 06.09.2008 15:09