HTML程式碼：
<div class="form-group">         <label for="c-stuSearch" class="control-label col-xs-12 col-sm-2">{:__('視訊名稱')}:</label>         <div class="col-xs-12 col-sm-8">         <input data-rule="required"  type="text" class="form-control" id="stuSearch" name="row[stuSearch]"  value="" placeholder="輸入您想檢索的關鍵詞..."/>

        <ul id="autoBox">         </ul>         </div>     </div>

Jquery程式碼： 
<style type="text/css">     #autoBox     {

      margin: 0px;       padding: 0px;       border: 1px solid #CCCCCC;       width: 200px;     }     #autoBox li     {       clear: both;

      background-color: white;       color: black;       position: relative;       top: 0px;       left: 0px;       line-height: 35px;       width:200px;       text-align: left;       overflow: hidden;     }     #autoBox li:hover     {       background-color: gray;       color: yellow;       cursor: pointer;     }   </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript">   $(function(){       $.ajaxSetup({cache:false}) ; //不快取       //以下程式碼用於顯示檢索提示框       $("#autoBox").hide(); //初始化時隱藏補全提示框       $("#stuSearch").keyup(function(){ //輸入框中的keyup事件啟用以下查詢行為       $("#autoBox").html(""); //先清空補全提示框原有內容       if($("#stuSearch").val().length>0) // 如果輸入框不為空       {         $.ajax({ //後臺呼叫php檔案進行查詢           type:"post",           url:"weike/video/getSearchKeywords",           dataType:"json",           data:{keywords:$("#stuSearch").val()},           success:function(feedbackdata)           {           //console.log(feedbackdata);               $("#autoBox").show();// 顯示補全提示框               // 迴圈二維陣列，將資料追加到<ul>中               for(i=0;i<feedbackdata.length;i++)                {                  $("#autoBox").append("<li style='margin-bottom: 20px;'>"+feedbackdata[i]['title'].substr(0,40)+"<span style='display:none;'>"+"#"+feedbackdata[i]['hash']+"</span>"+"</li>");               }
              //為這些新增的li繫結單擊事件，單擊後將其值賦到輸入框中               $("#autoBox li").on("click",function(){                   $("#stuSearch").val($(this).text());               });
              $("#autoBox").append("<li style='text-align:right;color: red;'>關閉</li>");//在提示框的最後新增一個li用來關閉               /*新增單擊事件，單擊後隱藏提示框*/               $("#autoBox li:last").on("click",function(){                  $("#autoBox").hide();               });             }         });       }     })   }) </script>

PHP程式碼【該方法是通過 關鍵字對陣列(快取檔案進行)模糊查詢，並非是直接通過關鍵字查詢資料庫獲取資料】： /**      * 通過關鍵字獲取資料【試題】      */     public function getSearchKeywords(){         $keyword = $this->request->post('keywords');         $videoList = $this->getVideoQiniuCache($keyword);         exit(json_encode($videoList));     }

 /**      * 獲取快取中的七牛雲資料,並通過關鍵字對陣列模糊查詢      * @param  string  $keyword 關鍵字      * @return array   return $questions 通過關鍵字匹配的試題資料      */     public function getVideoQiniuCache($keyword){              // 取出快取，過期或不存在返回false         $video_qiniu = cache('admin_video_qiniu');         if (!$video_qiniu) {             $cacheConfig = config('cache');             $video_qiniu = db('video_qiniu')->field('id,title,hash')->order('id desc')->select();             // 設定快取資料             cache('admin_video_qiniu',$video_qiniu);         }         // 對陣列進行模糊查詢         $arr=$result=array();         foreach ($video_qiniu as $key => $value) {                  foreach ($value as $valu) {                 if(strstr($valu, $keyword) !== false)                 {                     array_push($arr, $key);                 }             }         }         foreach ($arr as $key => $value) {             if(array_key_exists($value,$video_qiniu)){                 array_push($result, $video_qiniu[$value]);             }         }         return $result;     }