javascript – Bootstrap Typeahead在我的场景中仅需要两次点击,并且需要动态地为20行进行工作

以下是我的实际场景的代码示例.我只需要在显示按钮上单击一次就调用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函数,用于在单击“show”按钮并单击“clear”时显示城市列表：销毁先前初始化的typeahead.这仅在双击显示按钮时有效.我只需点击一下按钮即可完成这项工作.

$('#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',minLength : 0
    });
});
$('#clear2').click(function() {
    $('#city2').val('');
    $('#city2').typeahead('destroy');
});

解决方法

要修复需要双击“显示”按钮,请在.typeahead()之后移动.trigger()和.focus()

即

$('#city1').typeahead({...});
$('#city1').trigger('keyup');
$('#city1').focus();

更新小提琴：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','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 />不需要结束标记

小提琴：https://jsfiddle.net/p90nv67g/