Question

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

这是我用于绑定的代码：

这是选择列表

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

我正在使用ajax绑定此项目：

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

如果没有输入和搜索的结果，它会自动显示“未找到结果”。但是相反，我需要在同一下拉列表中显示另外3个选项，这些选项应为1）“其他” 2）“自雇”，3）“自由枪骑兵”

我正在尝试这样做，但无法实现：

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

                 }
});

也请查看未找到结果后得到的图像

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

NotFoundHttpException

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

Answer 2

mm .. 如果它们始终相同，则可以始终添加它们，并仅使用CSS显示将其隐藏。

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

如果在引导程序下拉列表中未找到结果，请添加自定义选项（选择选择器）

2 个答案: