|
我們每天瀏覽網(wǎng)頁都能見到搜索框
搜索框的原理：
客戶端：輸入要搜索的關(guān)鍵字于文本框，然后文本框?qū)㈥P(guān)鍵字獲取，使用ajax發(fā)送請求到服務(wù)端，然后根據(jù)服務(wù)端返回來的信息顯示到一個div中
服務(wù)端：接收傳過來的數(shù)據(jù)，然后在數(shù)據(jù)庫中搜索，再返回數(shù)據(jù)給客戶端
首先是客戶端
新建一個輸入框
- <input type="text" id="keyword" name="keyword" />
在輸入框的下面創(chuàng)建一個div，先讓他隱藏起來
- <div id="searchBox" display: none"></div>
注：搜索框的定位可以使用絕對定位，定在輸入框的下面，搜索按鈕可以加在輸入框的旁邊，同樣也是使用絕對定位
接下來是使用jq發(fā)送ajax請求（這里使用的是json格式的數(shù)據(jù)）
- <script>
- $(document).ready(function(){
- var xhr=null;
- $('input[name="keyword"]').keyup(function() {
- if(xhr){
- xhr.abort();//如果存在ajax的請求，就放棄請求
- }
- var inputText= $.trim(this.value);
- if(inputText!=""){//檢測鍵盤輸入的內(nèi)容是否為空，為空就不發(fā)出請求
- xhr=$.ajax({
- type: 'GET',
- url: 'service/suggestion.php',
- cache:false,//不從瀏覽器緩存中加載請求信息
- data: "keyword=" + inputText,//向服務(wù)器端發(fā)送的數(shù)據(jù)
- dataType: 'json',//服務(wù)器返回數(shù)據(jù)的類型為json
- success: function (json) {
- if (json.length != 0) {//檢測返回的結(jié)果是否為空
- var lists = "<ul>";
- $.each(json, function () {
- lists += "<li>"+this.pd_name+"</li>";//遍歷出每一條返回的數(shù)據(jù)
- });
- lists+="</ul>";
-
- $("#searchBox").html(lists).show();//將搜索到的結(jié)果展示出來
-
- $("li").click(function(){
- $("#keyword").val($(this).text());//點擊某個li就會獲取當(dāng)前的值
- $("#searchBox").hide();
- })
-
- } else {
- $("#searchBox").hide();
- }
-
-
- }
-
- });
- }else{
- $("#searchBox").hide();//沒有查詢結(jié)果就隱藏搜索框
- }
- }).blur(function(){
- $("#searchBox").hide();//輸入框失去焦點的時候就隱藏搜索框
- });
-
- });
- </script>
服務(wù)端使用php語句連接數(shù)據(jù)庫，然后進行查詢（這里使用的是PDO連接的方法）
- <?php
- session_start();
-
- function connectDb(){//連接數(shù)據(jù)庫的函數(shù)
- $db_server="localhost";
- $db_name="test";//數(shù)據(jù)庫的名稱
- $db_user="root";//數(shù)據(jù)庫的用戶名，不同的用戶權(quán)限不同
- $db_pwd="";//數(shù)據(jù)庫的密碼
- $dsn="mysql:host=$db_server;dbname=$db_name;charset=utf8";//使用PDO的方法連接數(shù)據(jù)庫
-
- try{
- $connect=new PDO($dsn,$db_user,$db_pwd,array(PDO::ATTR_PERSISTENT=>true));//如果需要數(shù)據(jù)庫長連接，需要最后加一個參數(shù)
-
- }
- catch(PDOException $e){
- exit('數(shù)據(jù)庫連接失敗');
- }
- return $connect;
-
- }
-
- function test($keyword){//從數(shù)據(jù)庫中查找關(guān)鍵字的函數(shù)
- $db=connectDb();
- $result=$db->prepare("select 字段名 from 數(shù)據(jù)庫名字 where 字段名 like ?");
- $result->bindParam(1,$keyword);//第一個問號的值
- $result=>execute;
-
- return $result->fetchAll(PDO::FETCH_ASSOC);
-
-
- }
-
- $keyword=$_GET['keyword'];//獲取輸入框的內(nèi)容
-
- $suggestion=test($keyword);
-
- echo json_encode($suggestion);//輸出查詢的結(jié)果（json格式輸出）
-
- ?>
注：服務(wù)端的函數(shù)最好寫在別的頁面，方便管理。
這樣，搜索框的功能就能實現(xiàn)了。學(xué)習(xí)筆記，僅供參考~~
|
