find.php
<?php
//数据库连接常量
define("HOST","localhost");
define("USER","root");
define("PW","123456");
define("DBNAME","try");
//数据库连接
$conn = mysql_connect(HOST, USER, PW) or die('Could not connect to mysql server.' );
mysql_select_db(DBNAME) or die('Could not select database.');
//接收保单数据
$term = strip_tags(substr($_POST['search_term'],0, 100));
$term = mysql_escape_string($term);
//sql语句
$sql = "select name,phone from directory where name like '%$term%' or phone like '%$term%' order by name asc";
//执行语句
$result = mysql_query($sql);
//初始化string变量
$string = '';
if (mysql_num_rows($result) > 0){
while($row = mysql_fetch_object($result)){
$string .= "<b>".$row->name."</b> - ";
$string .= $row->phone."</a>";
$string .= "<br/>\n";
$data[] = $row;
}
echo "<pre>";
}else{
$string = "No matches!";
}
echo $string;
var_dump($data);
?>
index.html
<html>
<head>
<title>Welcome!</title>
<script src="jquery.js"></script><!--注意:这里引入Jquery-->
</head>
<body>
<h1>Search our Phone Directory</h1>
<form id="searchform" method="post">
<div>
<label for="search_term">Search name/phone</label>
<input type="text" name="search_term" id="search_term" />
<!--<input type="submit" value="search" id="search_button" /> -->
<input type="button" value="search" id="search_button" onclick="searchclick()" />
</div>
</form>
<div id="search_results" style = "display:none"></div>
</body>
</html>
<script type='text/javascript'>
function searchclick(){
$(document).ready(function(){
/*$("#search_results").slideUp(); */
//点击搜索按钮
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
/*//输入以后进行搜索
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
}); */
});
}
function ajax_search(){
$("#search_results").show();
//获取表单数据
var search_val=$("#search_term").val();
//jquery post提交
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
//在结果显示区域添加data数据
$("#search_results").html(data);
}
})
}
</script>