How to add an option to a bootstrap-select from the search if it does not yet exist?

Question

I am using bootstrap-select.

How can I add a new option to the select if I can't find it in the search menu that I get with data-live-search="true", because it does not yet exist?

Answer 1

Please follow below code::

HTML

<select class="selectpicker" id="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

CSS

.no-results{
    cursor: pointer;
}

JQUERY

$(document).ready(function (e) {
    $(document).on('click', 'li.no-results', function () {
        var new_option = $(this).text().split('"')[1];
        $("#selectpicker")
       .append('<option>'+ new_option +'</option>')
       .selectpicker('refresh');
       //You can also call AJAX here to add the value in DB
    });
});

Please change these code as you want.
Working Jsfiddle link: https://jsfiddle.net/ktmv1vxh/1/