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 相关文章推荐
使用原生JS实现弹出层特效
Dec 22 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
JS严格模式知识点总结
Feb 27 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
详解vuex 渐进式教程实例代码
Nov 27 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
使用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代码包装修正版
2008/03/15 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP在线书签系统分享
2016/01/04 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
基于Python解密仿射密码
2019/10/21 Python
如何在python中写hive脚本
2019/11/08 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
销售自荐信
2013/10/22 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
民事赔偿协议书
2014/11/02 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
python字符串的一些常见实用操作
2022/04/06 Python