Bootstrap select dropdown "No Results" click event

Question

I am using Bootstrap select dropdown which has the following code.

HTML

@Html.DropDownList("Product", SelectList, new { data_live_search = "true", @class = "content-small selectpicker", @tabindex = 1 })

In this dropdown I need to provide an option to add new values which are typed in the search bar in the dropdown to the existing collection of the dropdown based on the click event. I have modified the UI to say "Create" instead of No results found. Please refer the code and UI below.

JS

$('#Product').selectpicker({ noneResultsText: 'Create ' });

UI

I am trying to add click event to this text "Create" content which is highlighted in the screenshot above to add that content dynamically to the existing collection of the dropdown.

But, while clicking that text the dropdown gets closed and the element which shows the text gets removed, hence I could not call the on click function to add this item dynamically.

What are the possibilities of using this?

Answer 1

I think you're skipping that the input you're dealing with is outside of the .selectpicker. You can find working snippet below.

$('.selectpicker').selectpicker({
  noneResultsText: '<a href="#" class="creator">Create</a> '
});

$(".selectpicker").on("click",".creator",function(){
    $("p span").html("Clicked for "+$(".pickercontainer .bs-searchbox input").val());
});

.creator {
  display:inline-block;
  float:left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" />
<link rel = "stylesheet" type = "text/css" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>


<div class='pickercontainer'>
  <select class="selectpicker" data-live-search="true" >  
    <option>Alabama</option>
    <option>Alaska </option>
    <option>Arizona </option>   
  </select>
</div>
<br>

<p>Action: <span></span></p>

Answer 2

$('.selectpicker').selectpicker({
   noneResultsText: '<span class="pointer" onclick="createNew(this);"><b>{0}</b> (create new)</span>'
});

function createNew(event){
    var value = $(event).parents('div').siblings('.bs-searchbox').find('input').val(); 
    //Do something.... 
    alert(value); 
}

Answer 3

You can try this:

$('select').selectpicker({
    noneResultsText: "<li style='cursor:pointer' class='no-results-found'>Other</li>"
});

Here you can create <li> or whatever you want to, after this call click event:

 $(".bootstrap-select input").on("keyup", function() {
     $this = $(this).parents(".bootstrap-select").find(".no-results-found")
     if ($this.length > 0) {
         $this.on("click", function() {
             alert("here");
         });
     }
 });   

I hope this will help you :)