Question

我知道stackoverflow往往会回避＆＃34;文本墙＆＃34;帖子，但我已经在这里待了大约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，当我做出选择时，它会将该答案填充到我页面的第二个输入框中，然后执行该代码。我无法弄清楚为什么这样做，这让我发疯了......

Answer 1

您正在全局范围内定义函数，第二个是覆盖第一个函数。你可以通过命名空间（缺少更好的术语）来解决这个问题，方法是将它们粘贴到一个对象中。

例如，

<强>的script.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));  

    }
}

<强> script2.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。

Answer 2

这是因为你有两个全局范围的函数叫做“set_item”

是什么原因导致这个javascript代码以它的方式运行？

2 个答案: