【輸入智慧提示功能】PHP+jQuery實現自動補全功能
阿新 • • 發佈：2019-02-15
前面手工寫了一個下拉自動補全功能，寫的簡單，只實現了滑鼠選擇的功能，不支援鍵盤選擇。由於專案很多地方要用到這個功能，所以需要用心做一下。發現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元素。
<!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="color:#008000;background-color: #f5f5f5;">//</span><span style="color:#008000;background-color: #f5f5f5;"> 提供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>
下面是控制器的例子：
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方法：
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