1. 程式人生 > >ThinkPHP3.2.3---ajaxreturn的應用:一個在搜尋框中輸入,實時動態顯示模糊搜尋結果

ThinkPHP3.2.3---ajaxreturn的應用:一個在搜尋框中輸入,實時動態顯示模糊搜尋結果

實現目標

  在一個文字框中輸入關鍵詞,利用ajax和ajaxreturn實時顯示模糊搜尋的json資料。當然獲得了json資料,後期處理資料就隨你怎麼弄了。

最終實現效果

無任何動作

這裡寫圖片描述

當文字框輸入值為空時

這裡寫圖片描述

輸入關鍵詞‘A’,動態顯示模糊搜尋的json結果

這裡寫圖片描述

輸入關鍵詞‘A4’,動態顯示模糊搜尋的json結果

這裡寫圖片描述

程式碼實現

提前說明:1. 實現ajax是跟框架沒關係的。2. ajaxreturn 只是返回資料(資料格式可以為json,jsson,xml等)。

模板:View檢視模板search/index.html

<!DOCTYPE html>
<html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{$title}</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"
>
</script> <script language="JavaScript"> var oldValue; oldValue = ""; function valueChanged(newValue) { if (oldValue != newValue) { oldValue = newValue; var searchValue = $('#search_box').val(); if(searchValue == '') { $("#show_message"
).html('錯誤提示:搜尋框文字不能為空!'); $("#show_message").fadeIn(5000); $("#show_message").fadeOut(5000); $search.focus(); return ; }else{ //alert(searchValue); //開始ajax執行資料 $.ajax({ type: 'POST', url:'__CONTROLLER__/search/', data:{'searchValue':searchValue}, dataType: 'json', success: function(jsonData) { //alert(jsonData); $("#show_message").show(); $("#show_message").html(jsonData); $("#show_message").fadeOut(10000); return false; },//end success error:function(){ alert("資料載入失敗"); } });//end ajax } } }
</script> </head> <body> <label id="show_message" name="show_message"></label> <p> <div><input type="text" id="search_box" name="search_box" onKeyUp="valueChanged(this.value)">這是一個搜尋框</div> </body> </html>

控制器:controller/SearchController.class.php

<?php 
//---------------------------------------------------
//功    能:動態模糊搜尋測試
//建立日期:2015-10-27
//修改日期:2015-10-27
//創 建 人:yicm
//修 改 人:yicm
//修改內容:
//---------------------------------------------------
namespace Home\Controller;
use Think\Controller;
class SearchController extends Controller {    
    public function index(){    
        $this->assign('title','動態模糊搜尋測試');
        $this->display();
    }    

    public function helloSearch(){
        echo 'hello search!';
    }

    public function search(){  
        $keyword = $_POST['searchValue'];        
        //$keyword = 'A4';
        $Goods=M('t_goods');  
        //這裡我做的一個模糊查詢到名字或者對應的id,主要目的因為我這個系統是  
        //商城系統裡面用到直接看產品ID  
        $map['code|name|spec|model']  = array('like','%'.$keyword.'%');  
        // 把查詢條件傳入查詢方法  
        if($goods = $Goods->where($map)->select()){  
            $data = json_encode($goods);
            //$data = $goods;
            //echo $data;
            $this->ajaxReturn($data); 
            /*
            echo $goods[0][code];
            echo $goods[0][name];
            echo $goods[0][spec];
            echo $goods[0][model];
            echo "<p>";
            echo $goods[1][code];
            echo $goods[1][name];
            echo $goods[1][spec];
            echo $goods[1][model];
            echo 'success';
            */
        }else{  
            $goods['content'] = 'failed';
            $this->ajaxReturn($goods);  
        }  
    }    
    //獲取商品記錄數
    function getCount(){
        $credit = M('t_goods');
        $count = $credit->count(); //計算記錄數
        echo $count;
    }
}
?>

mysql資料庫表

這裡寫圖片描述

這裡寫圖片描述