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 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
canvas实现钟表效果
Feb 13 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
详解React 条件渲染
Jul 08 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
解析csv数据导入mysql的方法
2013/07/01 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python+tkinter实现学生管理系统
2019/08/20 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
小学教师事迹材料
2014/01/13 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
篮球赛口号
2014/06/18 职场文书
2014年财政工作总结
2014/12/10 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python