以下是我的实际场景的代码示例。只有在显示按钮上单击一次时，我才需要调用 typeahead。 JSFiddle
下面是我的 HTML 表格。
<table border="1" cellpadding="5" cellspacing="0" style="width: 100%">
<tr>
<td>City 1:</td>
<td>
<input id="city1"></input>
<button id="myButton1">Show</button>
<button id="clear1">Clear</button>
</td>
</tr>
<tr>
<td>City 2:</td>
<td>
<input id="city2"></input>
<button id="myButton2">Show</button>
<button id="clear2">Clear</button>
</td>
</tr>
</table>
我正在使用 bootstrap-typehead 这些是 <head> 中的内容如下.
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/3.1.0/bootstrap3-typeahead.js"></script>
然后是我的 jQuery 函数，用于在单击“显示”按钮和单击“清除”时显示城市列表:销毁先前初始化的预输入。这仅在我双击显示按钮时有效。我必须通过单击一个按钮来完成这项工作。
$('#myButton1').click(function() {
$('#city1').trigger('keyup');
$('#city1').focus();
$('#city1').typeahead({
source : [ 'Alabama', 'Alaska','Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ],
autoSelect : false,
items : 1000,
minLength : 0
});
});
$('#clear1').click(function() {
$('#city1').val('');
$('#city1').typeahead('destroy');
});
//trigger the typeahead
$('#myButton2').click(function() {
$('#city2').trigger('keyup');
$('#city2').focus();
$('#city2').typeahead({
source : [ 'Alabama', 'Alaska','Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ],
autoSelect : false,
items : 1000,
minLength : 0
});
});
$('#clear2').click(function() {
$('#city2').val('');
$('#city2').typeahead('destroy');
});
最佳答案
要解决需要双击“显示”按钮的问题，请移动 .trigger()和 .focus()在 .typeahead() 之后
即
$('#city1').typeahead({...});
$('#city1').trigger('keyup');
$('#city1').focus();
更新 fiddle :https://jsfiddle.net/5o8srLkm/
对于适用于任意数量行的代码，我建议将 CSS 类添加到 html。这有助于使用 jQuery 的 prevAll 找到被点击按钮的关联输入字段。 .
(我还在创建 .typeahead() 之前销毁它 - 以防输入字段已经存在)
$('.btnShow').click(
function() {
var $cityInput = $(this).prevAll('.cityInput'); // find the input associated with this button
$cityInput
.typeahead('destroy')
.typeahead({
source: ['Alabama', 'Alaska',
'Arizona', 'Arkansas',
'California', 'Colorado',
'Connecticut', 'Delaware',
'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana',
'Iowa', 'Kansas', 'Kentucky',
'Louisiana', 'Maine',
'Maryland', 'Massachusetts',
'Michigan', 'Minnesota',
'Mississippi', 'Missouri',
'Montana', 'Nebraska',
'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico',
'New York', 'North Carolina',
'North Dakota', 'Ohio',
'Oklahoma', 'Oregon',
'Pennsylvania', 'Rhode Island',
'South Carolina',
'South Dakota', 'Tennessee',
'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington',
'West Virginia', 'Wisconsin',
'Wyoming'
],
autoSelect: false,
items: 1000,
minLength: 0
});
$cityInput
.trigger('keyup')
.focus();
});
$('.btnClear').click(function() {
var $cityInput = $(this).prevAll('.cityInput'); // find the input associated with this button
$cityInput
.val('')
.typeahead('destroy');
});
...
<tr>
<td>City 1:</td>
<td>
<input id="city1" class="cityInput" />
<button class="btnShow">Show</button>
<button class="btnClear">Clear</button></td>
</tr>
<tr>
<td>City 2:</td>
<td>
<input id="city2" class="cityInput" />
<button class="btnShow">Show</button>
<button class="btnClear">Clear</button></td>
</tr>
...
注意 <input />不需要结束标签
fiddle :https://jsfiddle.net/p90nv67g/
关于javascript - Bootstrap Typeahead 在我的场景中只需要点击两次并且需要动态处理 20 行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52002916/