单击javascript onclick时，php搜索不会清除

Posted 2023-02-24

【中文标题】单击javascript onclick时，php搜索不会清除

【英文标题】：php search won't clear when javascript onclick is clicked

【发布时间】：2012-10-03 10:13:15

【问题描述】：

这就是我所拥有的 - 一个 javascript onclick 事件，它将从我的 mysql 数据库数据中解析 json 并在有人点击座位时显示它。

 var jsonData = <?php echo json_encode($array); ?>;

function displayInfoForDiv(i)
    document.getElementById('fname').innerhtml = jsonData[i].first_name;
    document.getElementById('lname').innerHTML = jsonData[i].last_name;
    

输出

    <?php while ($row = mysql_fetch_array($sql)) ?>
    <p><span id="fname"><?php echo $row['first_name']; ?></span></p> 
    <p><span id="lname"><?php echo $row['last_name']; ?></span></p>
    <?php  ?>

当您尝试查找名称时，PHP 用于我的搜索框 - 我正在使用它

     $sql = mysql_query("select * from people where first_name like '%$term%' OR last_name LIKE '%$term2%'");

所以我遇到的问题是，当我搜索马特时，会显示一个以上的结果。说：

马特 哈塞尔贝克 马特 呸

但是如果我使用onclick事件点击joe的座位，会显示如下：

乔 褶边 马特 呸

所以问题是当我触发 onClick 事件时搜索结果会保留，但第一个会改变。

我的问题是，当我点击一个座位来清除搜索结果并只显示一个但当我进行搜索以显示相似名称时，有没有办法。

我使用 PHP 和 JS 调用相同的数据，因为 JS 只有一个范围的楼层，而 php 正在从数据库中获取所有内容。

希望这很清楚，感谢您的任何意见。

【问题讨论】：

请不要使用mysql_* 函数来编写新代码。它们不再维护，社区已经开始deprecation process。看到 red box 了吗？相反，您应该了解prepared statements 并使用PDO 或MySQLi。如果你不能决定哪一个，this article 会帮助你。如果你选择 PDO，here is good tutorial。另见Why shouldn't I use mysql_* functions?

如果你搜索O'Neil会发生什么？我猜你忘了escape your SQL properly。

感谢您的更正 - 现在修复它们。

【参考方案1】：

这里有两个问题。

您多次为 id 属性使用相同的值。 您的结果设置存在逻辑缺陷

问题 1 的解决方案

将id属性改为class属性

当您在 javascript 中使用 document.getElementById 时，它会返回具有该 id 的第一个元素。 这意味着如果您有多个具有相同值的 id，则只会选择第一个元素。所以你的函数应该改成如下

function displayInfoForDiv(i)
document.getElementsByClassName('fname')[i].innerHTML = jsonData[i].first_name;
document.getElementsByClassName('lname')[i].innerHTML = jsonData[i].last_name;

问题 2 的解决方案

使用模板获取结果

将所有结果包装在一个 div 标签中

通过将结果包装到 div 标签中，您将能够通过清除该 div 标签的 html 来清除结果。

<div id='Results'>
   <?php while ($row = mysql_fetch_array($sql)) ?>
   <p><span class="fname"><?php echo $row['first_name']; ?></span></p> 
   <p><span class="lname"><?php echo $row['last_name']; ?></span></p>
   <?php  ?>
</div>

<script>
function clearResults()

    document.getElementById('Results').innerHTML='';

</script>

要使用结果模板，我建议underscore.js

因此，满足您需求的模板如下所示：

<script id='result-template' type="text/x-jquery-tmpl">
    <p><span class="fname">$first_name</span></p> 
    <p><span class="lname">$last_name</span></p>
</script>

要使用该模板，您需要执行以下操作：

下面的代码假设你已经包含了 underscore.js

function LoadResults(jsonData)

    _.templateSettings = 
        interpolate: /\$\(.+?)\/g
    ;
    var output='',
    resultDiv=document.getElementById('Results');
    template= _.template(
        document.getElementById('result-template').innerHTML
        );

    clearResults();

     for(x in jsonData)
     
        resultDiv.innerHTML+=template(jsonData[x]);
     

【讨论】：

首先，感谢您的帮助。这意味着你花时间做出回应。我只有几个问题。我使用 ID 是因为在我的 onClick 事件中每个都是不同的。例如 - - 我试过你的代码但我失去了我的 onClick 功能，它不显示任何东西。我确实改变了你说的，添加了underscore.js，并将解决方案2中的所有JS放在结果DIV下。我确实有很多 JS 脚本附加，这可能是问题吗？