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 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 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
PHPCMS的使用小结
2010/09/20 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
类如何去实现接口
2013/12/19 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
大学生自我鉴定
2013/12/08 职场文书
事假请假条范文
2014/04/11 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
机关作风建设整改方案
2014/10/27 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
mysql幻读详解实例以及解决办法
2022/06/16 MySQL