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

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

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);
?>

效果图

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

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

赞 (0)

相关推荐

  • php+mysql+ajax实现单表多字段多关键词查询的方法

    php+mysql+ajax实现单表多字段多关键词查询的方法

    本文实例讲述了php+mysql+ajax实现单表多字段多关键词查询的方法.分享给大家供大家参考,具体如下: 单表多字段查询在一些稍微复杂一点的查询中十分有用.这里主要利用MySQL数据库中的concat函数实现单表多字段多关键词查询.并且显示查询结果的表格可根据所选数据表动态生成. html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><

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

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

    对于这个功能企业上还算比较实用,推荐给大家: 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{wid

  • MySQL单表多关键字模糊查询的实现方法

    在最近的一个项目需要实现在MySQL单表多关键字模糊查询,但这数个关键字并不一定都存在于某个字段.例如现有table表,其中有title,tag,description三个字段,分别记录一条资料的标题,标签和介绍.然后根据用户输入的查询请求,将输入的字串通过空格分割为多个关键字,再在这三个字段中查询包含这些关键字的记录. 可目前遇到的问题是,这些关键字是可能存在于三个字段中的任意一个或者多个,但又要求三个字段必须包含所有的关键词.如果分别对每个字段进行模糊匹配,是没法实现所需的要求,由此想到两种

  • 浅谈mysql通配符进行模糊查询的实现方法

    在mysql数据库中,当我们需要模糊查询的时候 ,我们会使用到通配符. 首先我们来了解一下2个概念,一个是操作符,一个是通配符. 操作符 like就是SQL语句中的操作符,它的作用是指示在SQL语句后面的搜索模式是利用通配符而不是直接相等匹配进行比较. 注意:如果使用like操作符时没有使用通配符,那么效果是和等号是一致的. SELECT id,title FROM table WHERE title like '张三'; 这种写法就只能匹配张三的记录,而不能匹配像张三是个好人这样的记录. 通配

  • mysql中like % %模糊查询的实现

    1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] WHERE u_name LIKE '%三%' 将会把u_name为"张三","张猫三"."三脚猫","唐三藏"等等有"三"的记录全找出来. 另外,如果需要找出u_name中既有"三"又有"猫"的记录,请使用a

  • MySQL中Like模糊查询速度太慢该如何进行优化

    MySQL中Like模糊查询速度太慢该如何进行优化

    目录 一.前言: 二.第一个思路建索引 三.INSTR 附:Like是否使用索引? 总结 一.前言: 我建了一个<学生管理系统>,其中有一张学生表和四张表(小组表,班级表,标签表,城市表)进行联合的模糊查询,效率非常的低,就想了一下如何提高like模糊查询效率问题 注:看本篇博客之前请查看:Mysql中如何查看Sql语句的执行时间 二.第一个思路建索引 1.like %keyword 索引失效,使用全表扫描. 2.like keyword% 索引有效. 3.like %keyword% 索引失

  • JDBC连接MySQL并实现模糊查询

    场景: 在学习JDBC的语言中,每次都执行通用的几步:即注册驱动,获取连接,创建操作,处理结果,释放资源 过于复杂,因此不妨将上述步骤封装成工具类,只对外提供方法! 描述: 这是不使用工具类的封装写出来的代码,比较冗余复杂 package com.zdx.JDBC; import java.sql.*; public class JAVA1129_5 { public static void main(String[] args) { //设置空对象,注册驱动,获取连接,创建操作,处理结果集,释

  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

  • mySQL之关键字的执行优先级讲解

    如下所示: from 表 where 条件 group by 字段 形成虚拟的表及字段,聚合及字段添加 having 筛选数据 distinct 去重 order by 字段 asc,desc limit 限制条数 select 罗列记录 先根据where 约束条件 将数据从表中加载到内存,所以where的条件作用在数据之前,然后根据字段进行分组,在内存中形成一张虚拟的表包含字段, 如果此时有聚合函数则先执行聚合函数,并将聚合函数字段也加到虚拟的表中,接着进行having记录筛选,筛选完成后对数

  • Element-ui 自带的两种远程搜索(模糊查询)用法讲解

    Element-ui 自带的两种远程搜索(模糊查询)用法讲解

    问题描述 有一种查询叫做前端远程搜索.模糊查询.饿了么自带两种方式可以做,一种是使用el-input中的el-autocomplete,另一种是使用el-select和el-option.这两种都可以选择,但是具体实现的思路方式要和后端商量.模糊查询是谁来做? 如果后端做 那么前端只需要把用户在输入框中的输入的关键字扔给后端,后端根据前端传过来的用户要查询的关键字,去数据库中进行模糊查询,查到的关联的数据扔给前端,前端拿到数据以后直接呈现给用户看到就行了.前端省事些 如果前端做 正常情况下,模糊

  • asp.net利用存储过程实现模糊查询示例分享

    复制代码 代码如下: USE [TestDB]GO /****** Object:  Table [dbo].[tblCustomer]    Script Date: 01/18/2014 22:01:53 ******/SET ANSI_NULLS ONGO SET QUOTED_IDENTIFIER ONGO CREATE TABLE [dbo].[tblCustomer]( [id] [int] IDENTITY(1,1) NOT NULL, [name] [nvarchar](100)

随机推荐