jq.ajax+php+mysql實現(xiàn)關(guān)鍵字模糊查詢(示例講解)

2024-09-01 08:33:56

字體：大中小

供稿：網(wǎng)友

對于這個功能企業(yè)上還算比較實用，推薦給大家；

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){			//轉(zhuǎn)換成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 "數(shù)據(jù)庫鏈接失敗";	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)){	//判斷是否有對應(yīng)的數(shù)據(jù)	if(!$row){		$search='';		exit;	}else{		//對查詢關(guān)鍵字進行標(biāo)記		$row['sea'] = str_replace($text, '<font color="red">' .$text. '</font>', $row['sea']);		$search[]=$row;			}}echo json_encode($search);?>

效果圖

模糊查詢,關(guān)鍵字,mysql,php,ajax