Below are code examples of my actual scenario. I need to call typeahead only when click on show button only once.jsfiddle https://jsfiddle.net/x6egfvwo/2 I have below table in 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>
I am using bootstrap-typehead and below are my imports in header
<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>
Below is my jquery function to display city list when click on show button and clear to destroy typeahead that previously initialized. This works only when i click on show button two times. I need to make this work in single click. Then i will be having nearly 20 rows. How to make this code dynamic that works for all the rows.
$('#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');
});
from Bootstrap Typeahead working on only two clicks in my scenario and Need to make work on dynamically for 20 rows
No comments:
Post a Comment