在单独的div中显示多个MySQL记录

时间:2015-03-15 23:07:46

标签: php jquery mysql

我正在尝试创建一个自动建议系统来查询MySQL,并在用户键入时向用户显示可能的选项。一切都工作正常,直到其中一个选项被点击。当通过jQuery发出警报时,会传递包含所有查询记录的文本块,而不是仅传递被点击的文本。

这是PHP:

$query=$conn->query("SELECT * from Customers where Phone like '%$searchq%' limit 10") or die($conn->error);

while($row = mysqli_fetch_array($query)) {

$fname = $row['FName'];
$lname = $row['LName'];
$add01 = $row['Address 01'];
$add02 = $row['Address 02'];
$suburb = $row['Suburb'];
$state = $row['State'];
$pcode = $row['Postcode'];
$phone = $row['Phone'];
$email = $row['Email'];

$output.= '<div name="firstdiv" class="redata" style="width:auto;text-align:left;text-decoration:none;color:black;">'.$phone.' '.$fname.' '.$lname.' '.$add01.' '.$add02.' '.$suburb.' '.$state.' '.$pcode.' '.$email.'</div>';

echo $output;

$mysqli->close;

$ output然后被发送到以下html:

<div name="seconddiv" class="seconddiv" id="seconddiv" style="height:auto;width:auto;margin-top:60px;float:left;font-family:Verdana;font-size:14px;color:black;position:absolute;display:none;z-index:10000;border-radius:7px;border:1px solid navy;background-color:rgba(184,204,228,0.3);padding:7px;">
<div name="thirddiv" class="thirddiv" id="thirddiv" style="height:auto;width:auto;text-decoration:none;text-align:left;color:solid black;border:2px solid red;"></div>

然后通过以下jQuery提醒:

$('#thirddiv').click(function()  {
clientdets = $('#thirddiv').text(); 
alert(clientdets);
});

最后,结果是我将所有记录连接起来,并在警报消息框中的一个大块中显示它们。

我需要的是能够点击一个div,并且仅提醒该div的内容,而不是全部。

为了我的头发逐渐减少,我会非常感激任何帮助。过去几天我一直在为此而拔毛。

2 个答案:

答案 0 :(得分:0)

据我所知,你有一个像这样的html结构:

<div id="thirddiv">
   <div>text example 1</div>
   <div>text example 2</div>
   <div>text example 3</div>
   ...
</div>

然后应该将您的事件处理程序重写为以下内容:

$("#thirddiv").find("div").on("click", function()  {
   clientdets = $(this).text(); 
   alert(clientdets);
});

请注意,我在此处使用了id属性而不是name属性。

另外,应该避免使用内联样式。请改用单独的css样式表。

答案 1 :(得分:0)

我明白了!

一起摆脱了JQuery事件处理程序,并将php部分中的最后一行修改为:

echo '<li name="outputerator" class="redata" style="width:auto;text-align:left;text-decoration:none;color:black;border:2px solid green;"onclick="alert($(this).text());">'.$phone.' '.$fname.' '.$lname.''.$add01.''.$add02.' '.$suburb.' '.$state.' '.$pcode.' '.$email.'</li>';

并将#Thirddiv更改为<ul>。 我也好! : - )