PHP+jQuery實現自動補全功能源碼_PHP教程
      
編輯Tag賺U幣
      




      

      推薦：深入php之規范編程命名小結
      本篇文章是對php中規范編程命名進行了詳細的分析介紹，需要的朋友參考下
      前面手工寫了一個下拉自動補全功能，寫的簡單，只實現了鼠標選擇的功能，不支持鍵盤選擇。由于項目很多地方要用到這個功能，所以需要用心做一下。發現select2這個插件的功能可以滿足當前需求。

      在使用jquery插件select2的過程中遇到了一些疑惑，無論是穿json數據還是通過jsonp方式取數據，都能夠正確返回。可是下拉列表中的條目卻不能被選中，對鼠標和鍵盤選擇都無效。

      后來發現，select2插件在實現選中時是以數據中的id字段為準的。所以不管是json還是jsonp，ajax返回的數據都必須擁有id字段。如果實際數據庫中不存在這樣的id，也可以人為構造一個，但是要保證id的唯一性。

      這里列出模板文件try_diy.tpl的源碼： 
      其中colum輸入框是插件作用的地方，但其返回的值是id，當頁面提交后我們需要把用戶選擇的版塊重新呈現給用戶，我的做法是根據表單提交的id查詢對應的版面名稱name，當控制器收到id值且非空的時候，把版塊id對應的名稱name值同時呈現到頁面上顯示出來。由于select2插件是把name名稱放在構造的<div id="s2id_colum"></div>內層的span元素中，所以我會在查詢結果頁面加載后把隱藏域的name值寫到span元素。 
      復制代碼 代碼如下:www.wf0088.com
       
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      <html xmlns="http://www.w3.org/1999/xhtml"> 
      <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> 
      <link href="./static/js/select2-3.3.2/select2.css" rel="stylesheet"/> 
      <script src="./static/js/select2-3.3.2/select2.js"></script> 
      </head> 
      <body> 
      <form name="frm" id="frm" autocomplete="off" action="" method="post" > 
      <input name="c" type="hidden" value="try"/> 
      <input name="a" type="hidden" value="diy"/> 
      <label>飛流產品版塊 (Ajax調用遠程數據):</label> 
      <input type="hidden" class="bigdrop" id="colum" name="colum" style="width:600px" value=""/> 
      <input type="hidden" id="columname" value="<{$frmname}>" name="columname" /> 
      <p>版塊ID：<{$frmid}></p> 

      </form> 
      <script> 
      $(document).ready(function() { 
      $('#colum').select2({ 
      minimumInputLength: 0, 
      placeholder: '選擇版塊', 
      ajax: { 
      url: "http://pm.feiliu.com/?c=try&a=ajax_diy",<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">//</SPAN><SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000"> 提供jsonp請求的url地址</SPAN> 
                  dataType: 'jsonp', 
                  jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名(一般默認為:callback，故可省略) 
                  //jsonpCallback:"testback", 
                  //jsonpCallback是自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名，也可寫"?"，jQuery會自動處理數據 
      quietMillis: 100, 
      data: function(name, page) { 
      return { 
      types: ["exercise"], 
      limit: -1, 
      q: name 
      }; 
      }, 
      results: function(data, page ) { 
      return { results: data.items } 
      } 
      }, 
      formatResult: function(exercise) { 
      return "<div class='select2-user-result'>" + exercise.name + "</div>"; 
      }, 
      formatSelection: function(exercise) { 
      return exercise.name; 
      } 
      }); 

      $('#colum').change(function(){ 
      frm.submit(); 
      }); 
      var name = $("#columname").val(); 
      if(name){ 
      $("#s2id_colum").find("span").text(name); 
      } 
      }); 
      </script> 
      </body> 
      </html> 
       
      下面是控制器的例子： 
      復制代碼 代碼如下:www.wf0088.com
       
      class pmc_try 
      { 
      public function diy(){ 
      if($_POST['colum']) 
      { 
      $fid = $_POST['colum']; 
      $fname = mod_forum::get_forum_name_by_fid($fid);//根據id取name 
      pm_tpl::assign('frmid',$fid); 
      pm_tpl::assign('frmname',$fname); 
      pm_tpl::display("try_diy"); 
      }else 
      { 
      pm_tpl::display("try_diy"); 
      } 
      } 
      public function ajax_diy(){ 
      $fid = $_GET['q']; 
      $callback = $_GET["callback"]; //默認函數名為callback 
      $forums = mod_forum::get_ajx_forum_by_tpid($fid); 
      $total = count($forums); 
      $result = array( 
      'total'=>$total, 
      'items'=>$forums 
      ); 
      $output = json_encode($result); 
      echo $callback.'('.$output.')';//構造jonsp 
      exit(); 
      } 
      } 
      ?> 
       
      model方法： 
      復制代碼 代碼如下:www.wf0088.com
       
      public static function get_forum_name_by_fid($fid) 
      { 
      $sql = "SELECT name FROM sq_forums WHERE fid='$fid' ORDER BY threads_counter DESC"; 
      $data = pm_db11::result_first($sql); 
      return $data; 
      } 
      public static function get_ajx_forum_by_tpid($tpid, $fid) 
      { 
      //產品ID：tpid，版塊ID：fid 
      $data = array(); 
      if($tpid && $fid){//構造一個id字段，也可以通過對查詢結果加工構造 
      $sql = "SELECT fid AS id,fid,name FROM sq_forums WHERE tpid='$tpid' AND name LIKE N'%$fid%' ORDER BY threads_counter DESC"; 
      $query = pm_db11::query($sql); 
      $data = pm_db11::fetch_all($query); 
      } 
      return $data; 
      } 
       
      補充一下，實際使用為突出提示效果，可以高亮顯示name中包含的查詢關鍵字，這一點可以再select2的formatResult函數中處理，也可以在php中進行加工處理。這一點 的源碼我這里就不寫了。 
      補充參考http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
      分享：解析php中mysql_connect與mysql_pconncet的區別詳解
      本篇文章是對php中mysql_connect與mysql_pconncet的區別進行了分析介紹，需要的朋友參考下
      


      

      


      來源：模板無憂//所屬分類：PHP教程/更新時間：2013-05-16


      


      



      


      



      相關PHP教程：