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

user_1722779 0
Viewed 1410

Here are code examples of my actual scenario. I need to call typeahead only when clicking once on the show button. JSFiddle
Down below is my 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>

I am using bootstrap-typehead these are as follows what's within the <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>

Then there is my jQuery function, utilised to display a list of cities when the 'show' button is clicked and when 'clear' is clicked: destroy the previously initialised typeahead. This works only when I double click the show button. I got to make this work in with a singular button click.

$('#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');
});
bootstrap-typeahead typeahead jquery javascript
5 Answers

To fix needing to double-click the Show button, move the .trigger() and .focus() after .typeahead()

i.e.

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

Updated Fiddle: https://jsfiddle.net/5o8srLkm/

For code that works with any number of rows I suggest adding CSS classes to the html. This aids finding the associated input field of the clicked button using jQuery's prevAll.

(I also destroy .typeahead() before creating it - in case it already exists for the input field)

$('.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>
...

Note <input /> doesn't need a closing tag

Fiddle: https://jsfiddle.net/p90nv67g/

user_15448860

You are triggering the keyup before initializing the typeahead and hence it is not showing for the first time. Initialise before and then trigger it and you are done.

 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');
}
user_35721790

You can use HTML Datalist instead. Check the code below: 

<!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>

user_59959730

You have to trigger click event to typehead script to call show list in the input field using .trigger() event.

An answer for your second question is below to call typehead only once when clicks on show button, Please check https://jsfiddle.net/manishjethva/thmr9k2L/8/ for more detail. 

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

        });
user_12709050

as K Scandrett mentioned To fix needing to double-click the Show button, move the .trigger() and .focus() after .typeahead()

i.e.

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

Second Part

only works with show button, we will disable it while the user is changing input

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

jsfiddle

user_71539360
Related