是什么导致这个JavaScript代码以它的方式运行
what is causing this javascript code to function the way it is?
我知道 stackoverflow 倾向于回避"文本墙"帖子,但我已经在这里呆了大约 4 个小时,我无法弄清楚,所以我想提供尽可能多的信息。
我有一个页面上有两个输入表单。 每当我将文本添加到第一个输入按钮中时,附加到第二个输入按钮的 javascript 函数都会运行,我不知道为什么。
在我的标题中,我有两个脚本:
<script type="text/javascript" src="/autocomplete/js/script.js"></script>
其中包含:
function autocomplet() {
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#country_id').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'capoInstantSearch.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#country_list_id').show();
$('#country_list_id').html(data);
}
});
} else {
$('#country_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#country_id').val(item);
// hide proposition list
$('#country_list_id').hide();
$("#capoInfo").load("capoSingleReturn.php?q="+encodeURIComponent(item));
}
capoInstantSearch.php看起来像这样:
<?php
function connect() {
return new PDO('code here to connect'}
$pdo = connect();
$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT statement is here....";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
// put in bold the written text
$country_name = str_replace(strtoupper($_POST['keyword']), '<b>'.$_POST['keyword'].'</b>', $rs['quotePartNumber']);
// add new option
echo '<li onclick="set_item('''.str_replace("'", "''", $rs['quotePartNumber']).''')">'.$country_name.'</li>';
}
?>
和
<script type="text/javascript" src="/autocomplete/js/script2.js"></script>
其中包含:
function compCheck() {
var min_length = 0; // min caracters to display the autocomplete
var bootyTime = $('#comp_id').val();
if (bootyTime.length >= min_length) {
$.ajax({
url: 'capoInstantCompSearch.php',
type: 'POST',
data: {bootyTime:bootyTime},
success:function(data){
$('#comp_list_id').show();
$('#comp_list_id').html(data);
}
});
} else {
$('#comp_list_id').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#comp_id').val(item);
// hide proposition list
$('#comp_list_id').hide();
$("#compReturn").load("capoCompReturn.php?w="+encodeURIComponent(item));
}
输入框 1:
<input id="country_id" type="text" placeholder="Enter a Part Number"
onsubmit="this.value=this.value.toUpperCase()" autocomplete="off" onkeyup="autocomplet()">
<ul id="country_list_id"></ul>
输入框 2:
<input id="comp_id" type="text" onkeypress="this.value=this.value.toUpperCase()"
placeholder="Part Number 2" onkeyup="compCheck()"></h2>
<ul id="comp_list_id"></ul>
最终,autocomplet(( 的内容应该放在这个div 中
<div id="capoInfo" class="capoData"></div>
而 compCheck(( 的内容应该放在
<div id="compReturn" class="blueBorder"></div>
当我在第一个输入框中键入文本时,它会填充<ul>
country_list_id,当我做出选择时,它会将该答案填充到页面上的第二个输入框中,然后执行该代码。 我不知道它为什么要这样做,这让我发疯......
这是因为您在全局范围内有两个称为"set_item"的函数
您是在全局范围内定义函数,第二个是覆盖第一个。您可以通过将函数粘贴到对象中来命名间距(因为缺乏更好的术语(来解决这个问题。
例如
脚本.js
var country = {
autocomplete: function() {
var min_length = 0; // min caracters to display the autocomplete
var keyword = $('#country_id').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'capoInstantSearch.php',
type: 'POST',
data: {keyword:keyword},
success:function(data){
$('#country_list_id').show();
$('#country_list_id').html(data);
}
});
} else {
$('#country_list_id').hide();
}
},
// set_item : this function will be executed when we select an item
set_item: function(item) {
// change input value
$('#country_id').val(item);
// hide proposition list
$('#country_list_id').hide();
$("#capoInfo").load("capoSingleReturn.php?q="+encodeURIComponent(item));
}
}
脚本2.js
var comp = {
compCheck: function() {
var min_length = 0; // min caracters to display the autocomplete
var bootyTime = $('#comp_id').val();
if (bootyTime.length >= min_length) {
$.ajax({
url: 'capoInstantCompSearch.php',
type: 'POST',
data: {bootyTime:bootyTime},
success:function(data){
$('#comp_list_id').show();
$('#comp_list_id').html(data);
}
});
} else {
$('#comp_list_id').hide();
}
},
// set_item : this function will be executed when we select an item
set_item: function(item) {
// change input value
$('#comp_id').val(item);
// hide proposition list
$('#comp_list_id').hide();
$("#compReturn").load("capoCompReturn.php?w="+encodeURIComponent(item));
}
}
然后更改 HTML 中的引用以包含命名空间,例如
输入框 1(注意onkeyup
(
<input id="country_id" type="text" placeholder="Enter a Part Number"
onsubmit="this.value=this.value.toUpperCase()" autocomplete="off" onkeyup="country.autocomplete()">
<ul id="country_list_id"></ul>
然后对所有其他引用重复此操作,包括 PHP 代码中的引用。
您可能还想查看Browserify,它将Node的require
模块语法带到浏览器中。此外,您可能会阅读 JS 中的闭包和 IIFE。
相关文章:
- 如何加载/构建 Chrome 应用/扩展程序并以编程方式运行
- AJAX 以多线程方式运行
- 是什么导致这个JavaScript代码以它的方式运行
- 如何在Javascript中以过程化的方式运行一个又一个语句
- 以类似命令的方式运行 NodeApp
- 为什么我的保证金上限没有按应有的方式运行
- 以不同的方式运行JavaScript函数
- 以编程方式运行摩卡时的访问结果
- 优雅的方式运行大量异步“;事物;当总数为'直到第一个“;事物;退货
- Ember.js视图助手绑定没有按预期的方式运行
- {javascript} JS代码以意外的方式运行
- 简单的javascript for循环没有按照我认为的方式运行
- 有没有一种方法可以通过Firebug中的快捷方式运行JavaScript代码?
- 动画没有按照设定的方式运行
- 如何以编程方式运行node . js应用程序
- 为什么substring方法会以这种方式运行?
- Mocha:在以编程方式运行Mocha时获取stacktrace
- 是否可以将标志传递给 Gulp 以使其以不同的方式运行任务
- 画布绘制函数以异步方式运行
- OnSubmit 是按提交表单的每种方式运行,还是仅在单击“提交”按钮时运行