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

user_3047987 0
Viewed 2228

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 foundenter image description here

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 {

                 }
});
bootstrap-selectpicker twitter-bootstrap-3 twitter-bootstrap jquery
2 Answers

I have a good program. This code made my problem simpler. Have a look

styles

<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link href="assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/libs/css/style.css">
<link rel="stylesheet" href="assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
<link rel="stylesheet" href="assets/vendor/bootstrap-select/css/bootstrap-select.css">

<select class="selectpicker" data-live-search="true" id="branch" multiple>
        <option>B.Tech</option>
        <option>M.Tech</option>
        <option>Ph.D</option>
</select>

jQuery script

$('.selectpicker').selectpicker({
noneResultsText: 'No result found <button class="btn btn-dark" onclick=(add_opt(this))>Add new option</button>'
}); 

function add_opt(event){
var value = $(event).parents('div').siblings('.bs-searchbox').find('input').val();
$(event).parents('div').siblings('.selectpicker').append($("<option></option>").text(value)).val(value);
$('.selectpicker').selectpicker('refresh');
}
user_118148750

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;
}
user_57204060
Related