JSFiddle - React, Tailwind, and code Playground

by 7_Paul_21

HTML

<select id="user_id">
<option value="1">Пункт 1</option>
<option value="2">Пункт 2</option>
<option value="3">Пункт 3</option>
</select>

<input  id="inp"
  onclick = "
    a = document.getElementById('user_id');
    b = document.getElementById('inp'); 
    for (i=1; i<a.options.length; i++) {
       if (a.options[i].innerHTML == b.value) {a.options[i].selected = true; return}
    }
">

CSS

input, select {
    width: 300px;
    margin: 10px auto;
    display: block;
}

JavaScript

var field = $('#list').find('option');
  
// собственно поиск
$('#searchInput').bind('keyup', function() {
    var q = new RegExp($(this).val(), 'ig');
  
    for (var i = 0, l = field.length; i < l; i += 1) {
        var option = $(field[i]),
            parent = option.parent();
 
        if ($(field[i]).text().match(q)) {
            if (parent.is('span')) {
                option.show();
                parent.replaceWith(option);
            }
        } else {
            if (option.is('option') && (!parent.is('span'))) {
                option.wrap('<span>').hide();
            }
        }
    } 
});