溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
對于這個功能企業上還算比較實用，推薦給大家；
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實現關鍵字模糊查詢(示例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
