Как реализовать поиск в select по option без bootstrap

Использовать Select2 или Chosen

Включите следующие строки кода в разделе вашего HTML.

https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel = "stylesheet" /> https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js">

Инициализируйте Select2 для элемента , который вы хотите сделать удивительным.

<script type="text/javascript">
  $('select').select2();
</script>

$(".js-states").select2();

.js-states { 
  width: 200px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
<select class="js-states form-control"> 
  <optgroup label="Alaskan/Hawaiian Time Zone"> 
    <option value="AK">Alaska</option> 
    <option value="HI">Hawaii</option> 
  </optgroup> 
  <optgroup label="Pacific Time Zone"> 
    <option value="CA">California</option> 
    <option value="NV">Nevada</option> 
    <option value="OR">Oregon</option> 
    <option value="WA">Washington</option> 
  </optgroup> 
</select>

ни фига не понятно, но если вы хотите в элементе select узнать выбранную опцию, то:

/* получаем содержимое выбранной опции
* id - это id select-а
*/
function getSelectedOption (id) {

    var select = document.querySelector('#select'); // любым способом получить ссылку на select, в данном случае забираем по id
    var options = select.children; // сохраняем ссылки на опции
    var len = select.children.length; // получаем количество опций в select
    // перебираем опции
    for (var i = 0; i < len; i++) {
        // если опция выбрана (selected), то возвращаем её содержимое
        if (option[i].selected == true) {
            return option[i].value;
        }
    }
}