jquery - 如果在 Bootstrap 下拉列表中找不到结果，则附加自定义选项(选择选择器)

Question

我正在使用 Bootstrap 搜索dropdown工作正常。我想在同一下拉列表中附加/追加一些其他选项，以防搜索结果显示“没有结果匹配”。

这是我用于绑定(bind)的代码:

这是选择列表

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

我正在使用ajax来绑定(bind)此项目:

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);
            }
        });
}

如果我没有输入和搜索结果，它会自动显示“未找到结果”。但我需要在同一个下拉列表中显示另外 3 个选项，其中应该显示 1)“其他”2)“自营职业”、3)“自由职业者”

我正在尝试这个但无法实现:

 $(".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
        });

另请查看我在未找到任何结果后得到的图像

这是我尝试过的方法，并附加了新选项，以防找不到结果但现在我无法检索以前的过滤器

 $(".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 {

                 }
});

Answer 1

我有一个很好的程序。这段代码使我的问题变得更简单。看看吧

样式

<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 脚本

$('.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');
}