jq.ajax+php+mysql實(shí)現(xiàn)關(guān)鍵字模糊查詢(示例講解)
對(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ù)庫鏈接失敗"; 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ì)查詢關(guān)鍵字進(jìn)行標(biāo)記 $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實(shí)現(xiàn)關(guān)鍵字模糊查詢(示例講解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript進(jìn)階之前端文件上傳和下載示例詳解
這篇文章主要為大家介紹了JavaScript進(jìn)階之前端文件上傳和下載示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09小程序?qū)崿F(xiàn)頁面頂部選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)頁面頂部選項(xiàng)卡效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的小火箭發(fā)射動(dòng)畫效果,涉及javascript基于時(shí)間函數(shù)的頁面元素屬性動(dòng)態(tài)變換實(shí)現(xiàn)運(yùn)動(dòng)效果相關(guān)操作技巧,需要的朋友可以參考下2018-12-12原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07原生js?XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決
這篇文章主要介紹了原生js?XMLhttprequest請(qǐng)求onreadystatechange執(zhí)行兩次的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02javascript在IE下trim函數(shù)無法使用的解決方法
這篇文章主要介紹了javascript在IE下trim函數(shù)無法使用的解決方法,分別敘述了javascript以及jQuery下的解決方案,對(duì)于WEB前端javascript設(shè)計(jì)人員進(jìn)行瀏覽器兼容性調(diào)試有不錯(cuò)的借鑒價(jià)值,需要的朋友可以參考下2014-09-09Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03