admin管理员组文章数量:1349697
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=".11.3.js"></script>
<script src=".1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href=".1.0/css/bootstrap.min.css" />
<script src=".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');
});
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./jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.1.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare./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');
});
5 Answers
Reset to default 4 +50To 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/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/p90nv67g/
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');
}
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./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" autoplete="off"></td>
</tr>
<tr>
<td>City 2:</td>
<td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autoplete="off"></td>
</tr>
<tr>
<td>City 3:</td>
<td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autoplete="off"></td>
</tr>
<tr>
<td>City 4:</td>
<td><input type="text" name="search" id="search" placeholder="Type Something" list="searchresults" autoplete="off"></td>
</tr>
</table>
<datalist id="searchresults"></datalist>
</p>
</body>
</html>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/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);
});
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
本文标签：
版权声明：本文标题：javascript - Bootstrap Typeahead working on only two clicks in my scenario and Need to make work on dynamically for 20 rows - St 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743865467a2552501.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论