我有一个灰尘文件,其中添加了一些HTML代码。现在,我想在事件“ onkeyup”上调用JS函数“ startCheck()”。但是由于调用被困在DUST标签中,所以我无法访问写在同一文件中但在html body标签之外的JS函数。
摘要-如何从DUST模板调用JS函数?创建助手是唯一的解决方案吗?
<script type="text/javascript">
var ns = {}; // a name space
ns.checktimes = 0; // a couter of check times
// the check function
// @param dropdown: the drop-down list of Places.AutoComplete
// @param msg: the div to show message
ns._doCheck = function (dropdown, msg) {
if (dropdown.style.display == '') {
msg.innerHTML = 'has results? true';
ns.checkTimer = null;
}
else if (dropdown.style.display == 'none') {
msg.innerHTML = 'has results? false';
ns.checkTimer = null;
} else if (ns.checktimes < 20) { // check at most 10 seconds
ns.checktimes++;
ns.checkTimer = setTimeout(function () {
ns._doCheck(dropdown, msg);
}, 500);
}
}
function initialize() {
var input = document.getElementById('searching');
var options = {types: ['(cities)'], componentRestrictions: {country: "us"}};
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, "place_changed", function() {
$('#stat-boxes').hide();
var place = autocomplete.getPlace().formatted_address;
var getcityinfo = $.get('/cities', place).done(function(res){
res = JSON.parse(res);
var number_sites = (res[0]["count"]);
var Min_height = (res[0]["min_height"]);
var Max_height = (res[0]["max_height"]);
if( number_sites > 0 ){
var city = place.slice(0,-5);
$('#num-locations').text(number_sites);
$('#location-text').text(city);
if( Min_height && Max_height ){
$('#min-max-heights').text(Min_height+"' - "+Max_height+"'");
} else {
$('#min-max-heights').text('Not available');
}
$('#stat-boxes').fadeIn();
} else {
alert('No results');
}
/* Things to consider:
1. What do we do if we dont have heights(Min_height & Max_height)?
2. What do we do if we don't have(number_sites = 0) results?
3. When and how do we reset the results area - after an initial search result display?
4. We need to look into removing the country from ocation text ie: remove USA from 'Houston, TX, USA'
*/
});
// update stored value
ns.oldValue = document.getElementById('searching').value;
});
}
// to check whether responsee and has results
function startCheck () {
// the input node
var inp = document.getElementById('searching'),
value = inp.value; // value of input node
if (value && ns.oldValue != value) { // has value and changed, start check
// drop-down list and message div
var dropdown = document.getElementsByClassName('pac-container')[0],
msg = document.getElementById('msg');
// trick! change style to display='block'
dropdown.style.display = 'block';
// update stored value
ns.oldValue = value;
// initiate checktimes
ns.checktimes = 0;
// clear previous timer if exists
if (ns.checkTimer)
clearTimeout (ns.checkTimer);
ns.checkTimer = setTimeout(function () {
ns._doCheck(dropdown, msg);
}, 500);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
{<html_body}
<div class="carousel-wrapper">
<div class="carousel carousel-slider pic-carousel" style="height: 830px;">
<div class="over-pic carousel-fixed-item center" style="z-index: 1">
<div class="carousel-control-prev" id="btnPrev"> </div>
<div class="carousel-control-next" id="btnNext"> </div>
<div id="msg">has results? </div>
<input type="text" id="searching" onkeyup="startCheck();">