Как заставить добавить вход в опцию выбора?

Question

У меня есть простая поисковая система выбора опций, она отлично работает.

Демо-версия:

//jQuery extension method:
jQuery.fn.filterByText = function(textbox) {
  return this.each(function() {
    var select = this;
    var options = [];
    $(select).find('option').each(function() {
      options.push({
        value: $(this).val(),
        text: $(this).text()
      });
    });
    $(select).data('options', options);

    $(textbox).bind('change keyup', function() {
      var options = $(select).empty().data('options');
      var search = $.trim($(this).val());
      var regex = new RegExp(search, "gi");

      $.each(options, function(i) {
        var option = options[i];
        if (option.text.match(regex) !== null) {
          $(select).append(
            $('<option>').text(option.text).val(option.value)
          );
        }
      });
    });
  });
};

// You could use it like this:

$(function() {
  $('select').filterByText($('input'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="hello">hello</option>
  <option value="world">world</option>
  <option value="lorem">lorem</option>
  <option value="ipsum">ipsum</option>
  <option value="lorem ipsum">lorem ipsum</option>
</select>
<input type="text">

Проблема этого заключается в макете дизайна, необходимо, чтобы поисковая система отображалась в опции выбора.

следующим образом:

Я понимаю, что это делают некоторые библиотеки, такие как bootstrap и select2, но я не хочу использовать эти сторонние библиотеки.

У меня есть поисковая система, которая работает, мне просто нужно каким-то образом принудительно добавить поисковую систему в опцию select.

Как мне этого добиться?

Answer 1

Вы можете смоделировать поле выбора, как показано ниже. Поскольку вы включили тег jQuery, я использовал jQuery вместо Vanilla Javascript. Для морковки справа от выпадающего списка я использовал Fontawesome.

$("body").on("click", ".selected", function() {
  $(this).next(".options").toggleClass("open");
});

$("body").on("click", ".option", function() {
  var value = $(this).find("span").html();
  $(".selected").html(value);
  $("#sel").val(value);
  $(".options").toggleClass("open");
});

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li.search {
  padding: 0.5rem 0;
}

li>img {
  margin-right: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
  <input type="hidden" id="sel">
  <div class="container">
    <div class="selected">Select an option</div>
    <ul class="options">
      <li class="search"><input type="text" id="search"></li>
      <li class="option"><span>Option 1</span></li>
      <li class="option"><span>Option 2</span></li>
      <li class="option"><span>Option 3</span></li>
    </ul>
  </div>
</form>