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

问题描述 投票：3回答：5

以下是我的实际场景的代码示例。我只需要在显示按钮上单击一次就调用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-typeahead这些如下qazxsw poi中的内容。

<head>

然后是我的jQuery函数，用于在单击“show”按钮并单击“clear”时显示城市列表：销毁先前初始化的typeahead。这仅在双击显示按钮时有效。我只需点击一下按钮即可完成这项工作。

<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>
javascript jquery typeahead bootstrap-typeahead
5个回答
3
投票

要修复需要双击“显示”按钮，请在$('#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();

对于适用于任意行数的代码，我建议将CSS类添加到html中。这有助于使用jQuery的https://jsfiddle.net/5o8srLkm/查找单击按钮的关联输入字段。

（我在创建它之前也会破坏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 />

2
投票

您在初始化typeahead之前触发了keyup，因此它没有首次显示。之前初始化然后触发它，你就完成了。

https://jsfiddle.net/p90nv67g/
2
投票

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

 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');
}
2
投票

您必须使用<!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>事件触发click事件以预先输入脚本以在输入字段中调用show list。

第二个问题的答案如下，点击“显示”按钮时只调用一次类型，请查看.trigger()以获取更多详细信息。

https://jsfiddle.net/manishjethva/thmr9k2L/8/
2
投票

正如$('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按钮，在.typeahead（）之后移动.trigger（）和.focus（）

即

K Scandrett

第二部分

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

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.