Javascript 在我的场景中，Bootstrap Typeahead只在两次点击上工作，需要动态地工作20行
下面是我实际场景的代码示例。我只需要在单击“显示”按钮一次时调用typeaheadJavascript 在我的场景中，Bootstrap Typeahead只在两次点击上工作，需要动态地工作20行,javascript,jquery,typeahead,bootstrap-typeahead,Javascript,Jquery,Typeahead,Bootstrap Typeahead,下面是我实际场景的代码示例。我只需要在单击“显示”按钮一次时调用typeahead 下面是我的HTML表格 <table border="1" cellpadding="5" cellspacing="0" style="width: 100%"> <tr> <td>City 1:</td> <td> <input id="city1"></input&g
下面是我的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>
您在初始化typeahead之前触发了keyup，因此它不是第一次显示。初始化之前，然后触发它，你就完成了
function() {
$('#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
});
$('#city1').trigger('keyup');
}
您可以改用HTML数据列表。检查以下代码：
例1
$（文档）.ready（函数（）{
$（“#搜索”）。关于（“输入”，函数（e）{
var val=$（this.val（）；
如果（val==“”）返回；
//您可以使用它来限制结果
var国家=['阿拉巴马州'，'阿拉斯加州'，
“亚利桑那州”、“阿肯色州”，
“加利福尼亚州”、“科罗拉多州”，
康涅狄格州、特拉华州、，
“佛罗里达州”、“乔治亚州”、“夏威夷州”，
“爱达荷州”、“伊利诺伊州”、“印第安纳州”，
“爱荷华州”、“堪萨斯州”、“肯塔基州”，
路易斯安那州、缅因州、，
“马里兰州”、“马萨诸塞州”，
密歇根州、明尼苏达州、，
“密西西比州”、“密苏里州”，
“蒙大拿州”、“内布拉斯加州”，
“内华达州”、“新罕布什尔州”，
“新泽西州”、“新墨西哥州”，
‘纽约’、‘北卡罗来纳’，
“北达科他州”、“俄亥俄州”，
“俄克拉何马州”、“俄勒冈州”，
“宾夕法尼亚州”、“罗德岛州”，
“南卡罗来纳州”，
“南达科他州”、“田纳西州”，
“德克萨斯州”、“犹他州”、“佛蒙特州”，
“弗吉尼亚”，“华盛顿”，
“西弗吉尼亚州”、“威斯康星州”，
“怀俄明州”]；
var dataList=$（“#搜索结果”）；
dataList.empty（）；
对于（var i=0，len=countries.length；i要修复需要双击显示按钮的问题，请在之后移动.trigger（）
和.focus（）
i、 e
更新小提琴：
对于任何行数的代码，我建议将CSS类添加到html中。这有助于使用jQuery的
（我也会在创建它之前销毁.typeahead（）
，以防输入字段中已经存在它）
$（'.btnShow'）。单击(
函数（）{
var$cityInput=$（this）.prevAll（'.cityInput'）；//查找与此按钮关联的输入
$cityInput
.typeahead（'destroy'）
.提前打印({
资料来源：[“阿拉巴马州”、“阿拉斯加”，
“亚利桑那州”、“阿肯色州”，
“加利福尼亚州”、“科罗拉多州”，
康涅狄格州、特拉华州、，
“佛罗里达州”、“乔治亚州”、“夏威夷州”，
“爱达荷州”、“伊利诺伊州”、“印第安纳州”，
“爱荷华州”、“堪萨斯州”、“肯塔基州”，
路易斯安那州、缅因州、，
“马里兰州”、“马萨诸塞州”，
密歇根州、明尼苏达州、，
“密西西比州”、“密苏里州”，
“蒙大拿州”、“内布拉斯加州”，
“内华达州”、“新罕布什尔州”，
“新泽西州”、“新墨西哥州”，
‘纽约’、‘北卡罗来纳’，
“北达科他州”、“俄亥俄州”，
“俄克拉何马州”、“俄勒冈州”，
“宾夕法尼亚州”、“罗德岛州”，
“南卡罗来纳州”，
“南达科他州”、“田纳西州”，
“德克萨斯州”、“犹他州”、“佛蒙特州”，
“弗吉尼亚”，“华盛顿”，
“西弗吉尼亚州”、“威斯康星州”，
“怀俄明州”
],
自动选择：false，
项目：1000，
最小长度：0
});
$cityInput
.trigger（'keyup'））
.focus（）；
});
$（'.btnClear'）。单击（函数（）{
var$cityInput=$（this）.prevAll（'.cityInput'）；//查找与此按钮关联的输入
$cityInput
.val（“”）
.typeahead（‘销毁’）；
});
。。。
城市1：
显示
清楚的
城市2：
显示
清楚的
...
注意
不需要结束标记
小提琴：
您必须使用.trigger（）
第二个问题的答案如下：点击“显示”按钮时，只需呼叫一次打字机，请查看更多详细信息
$('body').data("btn1",true);
$('#myButton1').click(
function() {
var btn1 = $('body').data("btn1");
if(btn1 === false){
alert('typeahead calls only once, clear to call again.');
return;
}
$('#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
});
$('#city1').trigger('keyup');
$('#city1').focus();
$('body').data("btn1",false);
});
$('#clear1').click(function() {
$('#city1').val('');
$('#city1').typeahead('destroy');
$('body').data("btn1",true);
});
如上所述
要修复双击Show按钮的问题，请将.trigger（）和.focus（）移动到.typeahead（）之后
i、 e
第二部分
仅适用于“显示”按钮，我们将在用户更改输入时禁用它
$("#city1").on("input propertychange",function(){
$('#city1').typeahead('destroy');
});
问题是，我将在单击“显示”时调用webservice。对于每封信，它不应触发。只有在停止书写并单击“显示”后，它才应调用webservice并提供建议列表。然后用户需要提前键入以选择所需的一封。问题是，我将在单击“显示”时调用webservice。对于每封信，它应d未触发。只有在停止编写并单击“显示”后，它才应调用webservice并提供建议列表。然后用户需要提前键入以选择所需的一个无法从下拉列表中选择的一个。下拉列表立即消失。@Karthik，我已将$（“#city1”）.focus（）；事件触发事件之后，请检查最新的JSFIDLE URL JSFIDLE.net/manishjethva/thmr9k2L/8。我希望最新的答案能够解决您的问题
$('#city1').typeahead({...});
$('#city1').trigger('keyup');
$('#city1').focus();
$('body').data("btn1",true);
$('#myButton1').click(
function() {
var btn1 = $('body').data("btn1");
if(btn1 === false){
alert('typeahead calls only once, clear to call again.');
return;
}
$('#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
});
$('#city1').trigger('keyup');
$('#city1').focus();
$('body').data("btn1",false);
});
$('#clear1').click(function() {
$('#city1').val('');
$('#city1').typeahead('destroy');
$('body').data("btn1",true);
});
$('#city1').typeahead({...});
$('#city1').trigger('keyup');
$('#city1').focus();
$("#city1").on("input propertychange",function(){
$('#city1').typeahead('destroy');
});