Mail.ruПочтаМой МирОдноклассникиИгрыЗнакомстваНовостиПоискВсе проекты

Как осуществить неточный поиск в input по значению data-* атрибута?

Мастер (1279), закрыт 1 месяц назад
Сейчас это выглядит так:
html:
<input type="text" placeholder="Поиск" id="inp" list="rdr" />
<datalist id="rdr">
<option class="opt" value="1 Текст" data-kp="1"></option>
<option class="opt" value="2 Текст" data-kp="2"></option>
<option class="opt" value="3 Текст" data-kp="3"></option>
...
<option class="opt" value="183 Текст" data-kp="183"></option>
</datalist>

js:
$('#inp').on('input', function() {
var val = $(this).val();
$("#rdr").find("option").each(function() {
if ($(this).attr('data-kp') == val) {
$('#rdr option').removeClass("active");
$(this).addClass('active');
}
});
});

Скрипт ищет по точному совпадению в поле ввода. Как сделать поиск по неточному совпадению, как если бы я выбирал опции с текстом и искомым значением?

Ссылка на скрипт: http://jsfiddle.net/ngrfqpac/
Откройте код в браузере, чтобы посмотреть как изменяется класс "active".
Лучший ответ
http://jsfiddle.net/OPTlMUS/2hdu1gw7/

Но я всё равно не понял, зачем туда добавлять активный класс? Чтобы знать номер выбранной опциии? Так её и без этого можно достать...

...each( function( i ){ console.log( i ) });

i - будет номером текущего элемента из перебираемого списка.
Комментарий удален
Elepsis Eclipse Просветленный (21851) http://jsfiddle.net/OPTlMUS/bd1e6gua/ в регулярках символ ^ означает начало строки. А если опции постоянно будут динамически добавляться - ага, наверно легче через класс отслеживать.
Остальные ответы
Похожие вопросы
Также спрашивают