我在自动完成文本框中有一个从我的数据库中检索到的名称列表。当我单击自动完成文本框中的任何元素时，我需要显示该记录，但现在我无法显示记录.有人请帮助我... 这是我的代码......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete search using php, mysql and ajax</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function ()
{
$(".search").keyup(function ()
{
var searchid = $(this).val();
var dataString = 'search=' + searchid;
if (searchid != '')
{
$.ajax(
{
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function (html)
{
$("#result").html(html).show();
}
});
}
return false;
});
jQuery("#result").live("click", function (e)
{
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("<div/>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function (e)
{
var $clicked = $(e.target);
if (!$clicked.hasClass("search"))
{
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function ()
{
jQuery("#result").fadeIn();
});
});
</script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
}
.content{
width:50x;
margin:0 auto;
}
#searchid
{
width:200px;
border:solid 1px #000;
padding:10px;
font-size:14px;
}
#result
{
position:absolute;
width:200px;
padding:10px;
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
font-size:15px;
height:30px;
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
</style>
</head>
<body>
<form autocomplete="off">
<div class="content">
<input type="text" class="search" id="searchid" name="search" placeholder="Search for people" /> Ex:arunkumar, shanmu, vicky<br />
<div id="result">
</div>
</div>
</form>
</body>
</html>
search.php
<?php
include('connection.php');
if($_POST)
{
$search=$_POST['search'];
$sql_res=mysql_query("select * from students WHERE name LIKE '$search%' OR name='$search'");
while($row=mysql_fetch_array($sql_res))
{
$username=$row['name'];
$b_username='<strong>'.$search.'</strong>';
$final_username = str_ireplace($search, $b_username, $username);
?>
<div class="show" align="left">
<?php echo $final_username;?></div>
<?php
}
}
?>
<?php
if($_GET!=NULL)
{
$search=$_GET['search'];
echo $search;
$sql=mysql_query("select * from employee where name='$search'");
?>
<table border="1">
<tr><th>id</th><th>Name</th><th>Email</th><th>Age</th><th>School Name</th> </tr>
<?php
while($row=mysql_fetch_array($sql))
{
?>
<tr>
<td><?php echo $row['id'];?></td>
<td><?php echo $row['name'];?></td>
<td><?php echo $row['email'];?></td>
<td><?php echo $row['age'];?></td>
<td><?php echo $row['school_name'];?></td>
</tr>
<?php
}
}
?>
</table>
最佳答案
使用此代码，它将起作用。我已经编辑了你的代码并用我的测试表进行了测试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete search using php, mysql and ajax</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
font-size:18px;
}
.content{
width:50x;
margin:0 auto;
}
#searchid
{
width:200px;
border:solid 1px #000;
padding:10px;
font-size:14px;
}
#result
{
position:absolute;
width:200px;
padding:10px;
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
font-size:15px;
height:30px;
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
</style>
</head>
<body>
<form autocomplete="off">
<div class="content">
<input type="text" class="search" id="searchid" name="search" placeholder="Search for people" /> Ex:arunkumar, shanmu, vicky<br />
<div id="result">
</div>
<div id="records"></div>
</div>
</form>
<script type="text/javascript">
jQuery(function(){
jQuery(".search").keyup(function()
{
var searchid = jQuery(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
jQuery.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
jQuery("#result").html(html).show();
}
});
}return false;
});
});
function selValue(id, value){
jQuery('#searchid').val(value);
displayRec(id);
jQuery("#result").html('').hide();
}
function displayRec(id){
var dataString = 'searchid='+ id;
jQuery.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(data)
{
jQuery("#records").html(data);
}
});
}
</script>
</body>
</html>
搜索.php
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("cdcol");
if(isset($_POST['search']))
{
$search = $_POST['search'];
$search=$_POST['search'];
$sql_res=mysql_query("select * from cds WHERE interpret LIKE '%$search%' OR interpret='$search'");
while($row=mysql_fetch_array($sql_res))
{
$id=$row['id'];
$username=$row['interpret'];
$b_username='<strong>'.$search.'</strong>';
$final_username = str_ireplace($search, $b_username, $username);
?>
<div class="show" align="left" onclick="return selValue('<?php echo $id; ?>', '<?php echo $final_username; ?>');"><?php echo $final_username;?></div>
<?php
}
}
if(isset($_POST['searchid']))
{
$search=$_POST['searchid'];
$sql=mysql_query("select * from cds where id='$search'");?>
<table border="1">
<tr><th>id</th><th>Name</th><th>Email</th><th>Age</th></tr>
<?php
while($row=mysql_fetch_assoc($sql))
{
?>
<tr>
<td><?php echo $row['id'];?></td>
<td><?php echo $row['interpret'];?></td>
<td><?php echo $row['titel'];?></td>
<td><?php echo $row['jahr'];?></td>
</tr>
<?php
}
}
?>
</table>
检查此代码后请告诉我。
关于javascript - 如何从自动完成文本框中单击名称？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36999440/