jq.ajax+php+mysql实现关键字模糊查询(示例讲解)


Posted in Javascript onJanuary 02, 2018

对于这个功能企业上还算比较实用,推荐给大家;

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
*{margin:0;padding:0;}
.text{width:200px;height:30px;line-height:30px;font-size:14px;outline:none;}
ul{width:200px;height:auto;border:1px solid #999;border-top:none;}
ul li{width:200px;height:30px;line-height:30px;font-size:14px;}
li:hover{background:#ddd;}
</style>

<body>
<input type="text" class="text" name="text">
<ul class="sea"></ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">

$(".text").bind("input", function() { 
	if($(this).val().length>0){
		search();
	}else{
		$(".sea").html('');

	}
})
function search(){
	$.ajax({
		type:"GET",
		url:"sea.php",
		data:{"text":$(".text").val()},
		success:function(response){
			//转换成json对象
			eval("var json="+response);
			//console.log(json)
				var str="";
				for(var i=0;i<json.length;i++){
				str += "<li>" + json[i].sea + "</li>";
				}

				$(".sea").html(str);
		}
	})
}
</script>
</body>
</html>

sea.php

<?php
$con = mysqli_connect("localhost","username","password");
if(!$con){
	echo "数据库链接失败";
	exit;
}
mysqli_select_db($con,'jwhuang');
mysqli_query($con,'set names utf-8');
$text= isset($_GET['text']) ? trim($_GET['text']) : '';
$result=mysqli_query($con,"select * from search where sea LIKE '{$text}%' ");
$search=array();

while($row=mysqli_fetch_assoc($result)){
	//判断是否有对应的数据
	if(!$row){
		$search='';
		exit;
	}else{
		//对查询关键字进行标记
		$row['sea'] = str_replace($text, '<font color="red">' .$text. '</font>', $row['sea']);
		$search[]=$row;
		
	}
}
echo json_encode($search);
?>

效果图

jq.ajax+php+mysql实现关键字模糊查询(示例讲解)

完整代码下载:https://github.com/jwhuang59/Demos/tree/master/search

以上这篇jq.ajax+php+mysql实现关键字模糊查询(示例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 #Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 #Javascript
基于jquery.page.js实现分页效果
Jan 01 #jQuery
jquery实现企业定位式导航效果
Jan 01 #jQuery
jquery实现楼层滚动效果
Jan 01 #jQuery
jquery实现左右轮播切换效果
Jan 01 #jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 #jQuery
You might like
PHP学习之PHP变量
2006/10/09 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
javascript整除实现代码
2010/11/23 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
《石榴》教学反思
2014/03/02 职场文书
党风廉政承诺书
2014/03/27 职场文书
买房委托公证书
2014/04/08 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
初中新生军训方案
2014/05/13 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书