获取引导选择器实时搜索的输入文本值

Question

目前正在 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>

Answer 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>

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

Answer 2

我发布这个希望来帮助某人 基于此处建立的代码 https://github.com/codejq/comboxme/tree/master

在引导选择后在页面中添加以下 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 中添加类 Comboxme 到选择喜欢

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