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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 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
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
Javascript 二维数组
2009/11/26 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
Python制作Windows系统服务
2017/03/25 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Python读取word文本操作详解
2018/01/22 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
财务会计应届生求职信
2013/11/24 职场文书
工会趣味活动方案
2014/08/18 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书