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

Сейчас это выглядит так:
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".