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

發(fā)布時(shí)間：2020-10-18 06:05:59 來(lái)源：腳本之家閱讀：182 作者：hjw453321854 欄目：web開(kāi)發(fā)

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

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

效果圖

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

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

以上這篇jq.ajax+php+mysql實(shí)現(xiàn)關(guān)鍵字模糊查詢(xún)(示例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽