1

所以这就是我所拥有的 - 一个 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 正在从数据库中获取所有内容。

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

4

1 回答 1

1

你有两个问题在这里发生。

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

问题 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]);
     }
}
于 2012-10-13T23:30:58.797 回答