获取 bootstrap selectpicker live search 的输入文本值答案

【问题标题】：Get inputted text value of bootstrap selectpicker live search获取 bootstrap selectpicker live search 的输入文本值
【发布时间】：2018-01-14 05:42:04
【问题描述】：

目前在meteor.js 中构建一个网站，我似乎不知道如何从我的引导选择器中获取输入的文本——实时搜索文本框没有自己的ID。我的 HTML 如下所示：

    <div class="filter-component">
        <h5 class="text-center text-danger"> Name: </h5>
         <select ng-model="name" class="nameSelect" data-live-search="true" data-style="btn-primary" ng-options="x for x in names"> <option value="">Nothing selected</option>
          </select>
    </div>

【问题讨论】：

标签： javascript twitter-bootstrap meteor

【解决方案1】：

您需要编写一个自定义代码来获取输入框中的文本值。请参阅下面的示例：

选择器 HTML：

<div class="filter-component">
     <h5 class="text-center text-danger"> Name: </h5>
     <select ng-model="name" class="nameSelect" data-live-search="true" data-style="btn-primary" ng-options="x for x in names"> <option value="">Nothing selected</option>
      </select>
</div>

选择选择器 jQuery：

$(document).on('keyup', '.filter-component .bs-searchbox input', function (e) {
    var searchData = e.target.value;
    console.log(searchData);

    //You can write the ajax code here
});

【讨论】：

【解决方案2】：

我发布这个希望能帮助一些人基于这里建立的代码 https://github.com/codejq/comboxme/tree/master

在bootstrap-select之后在你的页面中添加以下css和js

<style>
     .comboxme .dropdown-menu .no-results {
        display: none !important;
    }
    .comboxme .dropdown-menu {
        top: unset !important;
        bottom: unset !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }
    .comboxme .bs-searchbox {
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }
    .comboxme .btn {
        background-color: white;
        color: blue;
    }
    .comboxme .bs-caret {
        color: white;
    }
</style>


<script>
        $(function () {
            $(".bs-searchbox input").blur(function () {
                var numberOfActiveItems = $(this).closest(".dropdown-menu").find("li.active").length;
                if (numberOfActiveItems > 0) return;
                console.log(numberOfActiveItems);
                var selectBoxName = $(this).closest(".comboxme").find("select")[0].name;
                $("#" + selectBoxName + " option[value='-1']").remove();
                $("#" + selectBoxName)
                    .append('<option value="-1" selected>' + $(this).val() + '</option>')
                    .selectpicker('refresh');
                $("#" + selectBoxName + "_add").remove();
                $(this).closest("form").append('<input type="hidden" id="' + selectBoxName + '_add" name="' + selectBoxName + '_add" value="' + $(this).val() + '" />');
            });
        });
</script>

在你的 html 中添加 class comboxme 到 select like

<select data-width="280px" data-live-search="true" class="comboxme form-control" data-val="true" 
data-val-required="The Status field is required." id="Status" name="Status">
<option value="1">Colorado</option>
<option value="2">Connecticut</option>
<option value="3">Delaware</option>
<option value="4">Florida</option>
<option value="6">Georgia</option>
<option value="7">Kentucky</option>
</select>

【讨论】：