Bootstrap Typeahead 在我的场景中只需要点击两次并且需要动态处理 20 行

Question

以下是我的实际场景的代码示例。只有在显示按钮上单击一次时，我才需要调用 typeahead。 JSFiddle
下面是我的 HTML table.

<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' 时显示城市列表单击：销毁先前初始化的预输入。这仅在我双击显示按钮时有效。我必须通过单击一个按钮来完成这项工作。

$('#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');
});

Answer 1

您在初始化 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');
}

Answer 2

您可以改用 HTML Datalist。检查下面的代码：

<!doctype html>
<html>
<head>
<title>Example 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 $("#search").on("input", function(e) {
  var val = $(this).val();
  if(val === "") return;
  //You could use this to limit results
    var countries= ['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'];
   var dataList = $("#searchresults");
   dataList.empty();
    for(var i=0, len=countries.length; i<len; i++) {
     var opt = $("<option></option>").attr("value", countries[i]);
     dataList.append(opt);
    }
 });
})
</script> 
</head>

<body>

<p>
  <table border="1" cellpadding="5" cellspacing="0" style="width: 100%">
            <tr>
                <td>City 1:</td>
                <td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off"></td>
            </tr>

            <tr>
                <td>City 2:</td>
                <td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off"></td>
                 </tr>
                  <tr>
                  <td>City 3:</td>
                <td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off"></td>
                 </tr>
                  <tr>
                  <td>City 4:</td>
                <td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autocomplete="off"></td>
            </tr>
        </table>
 <datalist id="searchresults"></datalist>
</p>

</body>
</html>

Answer 3

要解决需要双击“显示”按钮的问题，请将 .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/

Answer 4

您必须触发点击事件到打字头脚本才能使用 .trigger() 事件调用输入字段中的显示列表。

您的第二个问题的答案如下，点击显示按钮时仅调用一次打字头，请查看 https://jsfiddle.net/manishjethva/thmr9k2L/8/ 了解更多详情。

$('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);

        });

Answer 5

如K Scandrett所述要解决需要双击“显示”按钮的问题，请将 .trigger() 和 .focus() 移到 .typeahead()

之后

即

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

第二部分

仅适用于显示按钮，我们将在用户更改输入时禁用它

$("#city1").on("input propertychange",function(){
$('#city1').typeahead('destroy');
    });

jsfiddle

Bootstrap Typeahead 在我的场景中只需要点击两次并且需要动态处理 20 行

Bootstrap Typeahead working on only two clicks in my scenario and Need to make work on dynamically for 20 rows

javascript

jquery

typeahead

bootstrap-typeahead