[英]Selected item on Bootstrap dropdown list
我有一个带有Bootstrap框架的网站。 我有两个非常讨厌的输入字段,因为我无法让它们正常工作...
一个是该Bootstrap Typeahead输入字段:
<input type="text" id="typeahead" name='name' placeholder='The name' class="form-control" data-provide="typeahead" autocomplete="off" />
另一个是此下拉列表:
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" id="dates-dropdown-button" type="button" data-toggle="dropdown" href="#">
<?=$reminder_table_th_date?>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="name-dates-dropdown">
</ul>
</div>
( <li>
列表是通过Ajax调用填充的)
两者都想做:如果我在ajax下拉字段中选择一个项目,或者使用typeahead或下拉列表,则所选项目应该是该字段显示的值。 我尝试了很多方法,例如:
但他们都不在工作,我也不知道为什么。 我根本不是JS / jQuery专家,但这只是可疑。 我应该将jQuery代码确切放置在何处以及如何放置?
PS:Firefox Firebug没有显示任何JS错误,它们只是不执行任何操作,未设置值或未调用其功能。
这是用于typeahead Ajax调用的jQuery代码,下拉列表填充(工作正常),还有一行应设置typeahead值(在更新程序中),但可惜的是这行不通:
<script type="text/javascript">
$(document).ready(function() {
$('#typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: '/functions/name-autocomplete.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + query,
success: function(data) {
process(data);
}
});
},
displayText: function(item) {
return item
},
updater: function (item) {
$('#typeahead').typeahead('val', item);
$.ajax({
url: '/functions/name-dates-autocomplete.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + item,
success: function(data) {
$('#name-dates-dropdown').html(data);
}
});
}
});
});
</script>
为了处理引导程序下拉列表中的选择,您可以将click事件处理程序绑定到ul.dropdown-menu元素 。
这也使您能够从嵌套的li元素中捕获单击事件,实际上可以将其视为选择事件。
假定此html结构:
<div>
<input type="text"
id="typeahead"
name="date"
placeholder="date"
class="form-control"
data-provide="typeahead"
autocomplete="off" />
</div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle"
id="dates-dropdown-button" type="button"
data-toggle="dropdown" href="#">
<!-- Placeholder for the selected th date -->
<span class="selection"><?=$reminder_table_th_date?></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="name-dates-dropdown">
<li>12.11.97</li>
<li>10.01.07</li>
<li>2.11.2017</li>
</ul>
</div>
然后,您可以使用以下事件处理程序处理引导程序下拉列表上的选择:
// handles selections on a bootstrap dropdown list
$('.dropdown-menu').click(function (e) {
var isLITag = e.target && e.target.tagName == 'LI';
if (isLITag) {
var selectedValue = $(e.target).text();
$('#typeahead').typeahead('val', selectedValue);
// Specifies the display value of the dropdown element
$('.dropdown-toggle .selection').text(selectedValue);
e.preventDefault();
}
});
我认为只有第二个参数接受数据源时,如何将数据源分配给预输入一个问题。 此外,typeahead.js提供了更丰富的数据源实现,称为Bloodhound ,值得考虑。
我创建了一个使用猎犬数据源的演示。 它还演示了如何指定预输入的值以及如何处理预输入选择。
$(document).ready(function() { // Constructs the suggestion engine with a set of local dummy dates. var dateSet = { name: 'dates', display: 'date', source: new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('date'), queryTokenizer: Bloodhound.tokenizers.whitespace, local: [{ 'date': '12.11.97', 'id': 0 }, { 'date': '2.11.2017', 'id': 1 }, { 'date': '10.01.07', 'id': 2 }] /** * In order to integrate your ajax call * replace the local attribute with: * * remote: { * url: '/functions/name-autocomplete.php?query=%QUERY', * wildcard: '%QUERY' * } * * Twitter provides a list of examples at: * http://twitter.github.io/typeahead.js/examples/ * */ }) }; // Creates the typeahead and assign the dateSet. $('#typeahead').typeahead({ minLength: 1 }, dateSet); // The selection handler sets the value for the drop down-menu // whenever a suggestion is chosen. $('#typeahead').bind('typeahead:select', function(ev, selection) { $('.dropdown-menu').val(selection.date); $('.dropdown-toggle .selection').text(selection.date); }); // handles selections on a bootstrap dropdown list $('.dropdown-menu').click(function(e) { var isLITag = e.target && e.target.tagName == 'LI'; if (isLITag) { var selectedValue = $(e.target).text(); $('#typeahead').typeahead('val', selectedValue); //Specifies the display value of the dropdown element $('.dropdown-toggle .selection').text(selectedValue); e.preventDefault(); } }); });
.tt-menu { background: white; box-shadow: 0 5px 10px rgba(0,0,0,.2); border-radius: 9px; padding: 10px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script> <div> <input type="text" id="typeahead" name='name' placeholder='Serach for ...' class="form-control" data-provide="typeahead" autocomplete="off" /> </div> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" id="dates-dropdown-button" type="button" data-toggle="dropdown" href="#"> <!-- Placeholder for the selected th date --> <span class="selection"><?=$reminder_table_th_date?></span> <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="name-dates-dropdown"> <li>12.11.97</li> <li>10.01.07</li> <li>2.11.2017</li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.