Автопоиск совпадений при вводе и замена списка на новый
Добрый вечер.
Допустим, есть поле ввода и список из марок машин, 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 он регистрозависимый, не совсем подходит ( в примерах выше, совпадения ищутся по всей строке, т.е. ввёл букву "а" то находятся все слова где эта буква присутствует, можно ли сделать так, чтобы она искалась только в начале строки? при этом не ограничивая кол-во символов поиска в строке? |
Цитата:
Цитата:
<!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 не канает?
|
Цитата:
|
Какие именно проблемы?
|
| Часовой пояс GMT +3, время: 08:45. |