Append custom options if no results found in bootstrap dropdown(select picker)

I am using bootstrap search dropdown which is working fine. I want to attach/append few other options to the same dropdown incase search result shows "no result matches".

Here is the code that I am using for its bind:

This is selectlist

<select id="ddlselectPicker" onchange="return AppendData();" data-live-search="true"></select>


I am using ajax to bind this Item:

function AppendData()

var ddlCustomers = $("#ddlselectPicker");
ddlCustomers.empty().append('<option selected="selected" value="0" disabled = "disabled">Loading.....</option>');
$.ajax(
type: "Get",
url: $('#hfUrl').val(),
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (response)
ddlCustomers.empty().append('<option selected="selected" value="0">Select</option>');
$.each(response, function ()
ddlCustomers.append($("<option></option>").val(this['Prckey']).html(this['Name']));


);

,
failure: function (response)
alert(response.responseText);
,
error: function (response)
alert(response.responseText);

);



It automatically shows me "no results found" in case I don't et results from type and search. But instead of this, I need to show another 3 options in the same dropdown which should say 1)"Others" 2)"Self Employed", 3)"Free Lancer"

I am trying this but not able to achieve:

$(".dropdown-menu open >input").on('keydown', 'li.no-results', function ()
$("#selectpicker")
.append('<option>Others</option>')
.append('<option>Self Employed</option>')
.append('<option>Retired</option>')
.selectpicker('refresh');
//You can also call AJAX here to add the value in DB
);


Please also have a look on image which I get after I get no results found

This is what I ahve tried and which appended the new options in case no result found But now I am not able to retrieve the previous filter

$(".bs-searchbox >input").keyup(function ()
debugger;
var searchTerm = "";
var ddlCustomers = $("#ddlselectPicker");
var list = $(".dropdown-menu .inner li:eq(0)").text();
debugger;
if (list.indexOf("No results matched") != -1)
ddlCustomers.empty();
ddlCustomers.append('<option value="Others">Others</option>');
ddlCustomers.append('<option value="Self Employed">Self Employed</option>');
ddlCustomers.append('<option value="Retired">Retired</option>');
ddlCustomers.selectpicker('refresh');

else


);


success

response.length === 0

bootstrap

1 Answer
1

mm..
if they are always the same you could always add them and just hide them using a CSS display none.

code pen example

<select class="no-results">
<option value='Others'>Others</option>
<option value='Self Employed'>Self Employed</option>
<option value='Retired'>Retired</option>
</select>

<select class="with-results">
<option value='test'>Test1</option>
<option value='test'>Test2</option>
<option value='Others'>Others</option>
<option value='Self Employed'>Self Employed</option>
<option value='Retired'>Retired</option>
</select>


CSS

select.with-results option[value='Others'],
select.with-results option[value='Self Employed'],
select.with-results option[value='Retired']
display:none;

select.no-results option[value='Others'],
select.no-results option[value='Self Employed'],
select.no-results option[value='Retired']
display:block;



Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy