关闭

jquery+ajax+php实现搜索功能

3055人阅读 评论(0) 收藏 举报
分类:
html代码
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>搜索</title>
<script src="jquery-3.0.0/jquery-3.0.0.min.js"></script>
<link href="pagebar.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="bootstrap.css" type="text/css"/>
<script src="bootstrap.min.js"></script>
</head>
<html lang="en">
<div class="container">
<div><input type="text" id="gover_search_key" placeholder="请输入内容进行搜索"/>
<button type="submit" onclick="search()">搜索</button>
</div>
<div id="container" class="rows">
</div></div>
<script type="text/javascript">
function search(){
	var keyword=$("#gover_search_key").val();
	$.ajax({
		type:"GET",
		url:'search.php', 
		dataType:"json", 
		data:{'keyword':keyword},
		success: function (data) {
		//alert("test");
				var html='';
				var path1=eval(data)[0];
				inum=eval(data)[4][0];
				for(i=0;i<inum;i++){
				  html = html+'<div class="col-md-3 text-center"><img src="'+eval(data)[0][i]+'"style="height:200px,width:200px"/><p>'+eval(data)[2][i]+'</p></div>';
				  }
				 $("#container").html(html);
					
		}
	}
	)
}
</script>
</html>

php代码

<?php
header('Content-type:text/json; charset=utf-8');
@ $db = mysqli_connect('localhost','root','');
mysqli_query($db,"set names utf8;");
mysqli_select_db($db,'mpicture');//找到数据库mpicture
if(mysqli_connect_errno()){
 echo "Error:Could not connect to mysqli database.";
 exit;
}
$keyword=$_GET['keyword'];
$q="SELECT count(*) FROM picture where title like '%$keyword%'";
$result1 = mysqli_query($db,$q);
$row1 = mysqli_fetch_array($result1);
$allnum=$row1[0];
//echo $allnum;
$k="SELECT * FROM picture where title like '%$keyword%';";//对表picture进行选择
$result = mysqli_query($db,$k);//执行$k的mysql语句,并赋给result
$rownum = mysqli_num_rows($result);//获取result的数据数量
$picture=array(array());
for($i=0;$i<$rownum;$i++){
    $row = mysqli_fetch_assoc($result);//获取result的一条数据
	$picture[0][$i]= $row['path1'];//获得缩略图的路径
	$picture[1][$i]= $row['path2'];//获得全图的路径
	$picture[2][$i]= $row['title'];//获得文字描述
	$picture[3][$i]= $row['Id'];//获得id
}
$picture[4][0]=$allnum;
echo json_encode($picture);
?>


0
0
查看评论

php实现搜索功能

//一个简单的搜索 //我是将搜索语句加到最开始的查询语句里面;从而实现了代码的精简 //$news_sql = "SELECT * from books where 1=1 ".$searchAddSql." order by book_number "...
  • alpha_xiao
  • alpha_xiao
  • 2016-05-19 17:23
  • 7330

基于轻量级php搜索sphider站内搜索初级优化

站内搜索初级优化php1>. 概述: 站内搜索引擎顾名思义即网站内的信息搜索引擎,随着网络的发展,网站已经成为了企业或机构最重要的公共形象门户。每天,大量潜在的客户、合作者、投资人,分析师等会登陆企业的网站,网站带给他们的感受将直接影响到他们对公司的评价。根据IDC的调查显示:当用户...
  • chijiaodaxie
  • chijiaodaxie
  • 2015-09-24 17:53
  • 232455

站内全文搜索php源代码

  • 2010-06-18 00:16
  • 7KB
  • 下载

php/mysql实现搜索功能

id name <?php $name=$_POST[name]; //$sql=mysql_query("select * from message"); $sql=mysql_query("select * from message where name ...
  • xyh592
  • xyh592
  • 2015-08-25 17:57
  • 3100

Ajax实现搜索功能

Ajax在搜索功能应用还是比较广泛的
  • u010139093
  • u010139093
  • 2014-08-19 10:19
  • 4756

jQuery Ajax实现简单的搜索框提示功能

html: css代码: body{ background-color: #660099; } form{ float: left; background-color: #fff; position: re...
  • YLXB2
  • YLXB2
  • 2016-11-25 17:02
  • 2478

Ajax搜索框实现代码

  • 2012-12-25 22:41
  • 651KB
  • 下载

js及ajax实现搜索下拉自动提示

js代码 function test(keyword,event){ //定义全局变量 var keyword = $("#keyword").val(); var sel = document.getElementById("sel"); $....
  • sinat_38314794
  • sinat_38314794
  • 2017-06-12 20:27
  • 1576

ajax搜索提示js搜索提示

  • 2010-03-31 12:09
  • 37KB
  • 下载

【AJAX进阶(二)】--异步模糊查询

上篇博客讨论了DOM的基本使用情况,DOM树使得程序员能够直接在后台来操作HTML元素,熟练的使用DOM并集合AJAX能够构造出网页应用程序。今天进一步使用AJAX来实现一些复杂的功能,主要来讨论使用AJAX实现异步模糊查询的功能。
  • zhang_xinxiu
  • zhang_xinxiu
  • 2014-03-16 23:53
  • 6900
    个人资料
    • 访问:88497次
    • 积分:2581
    • 等级:
    • 排名:第16715名
    • 原创:169篇
    • 转载:16篇
    • 译文:0篇
    • 评论:36条
    最新评论