PHP+jQueryで自動補完機能のソースコードを実装_PHPチュートリアル

以前にドロップダウンのオートコンプリート関数を手動で作成しましたが、これは簡単に作成でき、マウス選択機能のみを実装しており、キーボード選択はサポートしていません。この機能はプロジェクト内の多くの場所で使用されるため、慎重に行う必要があります。 select2 プラグインの機能が現在のニーズを満たすことができることがわかりました。

jquery プラグイン select2 を使用するときに、json データを渡す場合でも、jsonp を介してデータを取得する場合でも、正しく返されるという疑問に遭遇しました。ただし、ドロップダウン リスト内の項目は選択できず、マウスやキーボードによる選択も無効になります。

その後、select2 プラグインが選択の基準としてデータ内の ID フィールドを使用していることがわかりました。したがって、json であっても jsonp であっても、ajax によって返されるデータには id フィールドが必要です。このような ID が実際のデータベースに存在しない場合は、手動で ID を作成することもできますが、ID の一意性を確保する必要があります。

テンプレート ファイル try_diy.tpl のソース コードはここにリストされています:
列入力ボックスはプラグインが機能する場所ですが、ページが送信されるときに返される値は ID です。ユーザーが選択したセクションをユーザーに提示します。コントローラーが ID 値を受け取り、それが空ではない場合、そのフォーラムに対応する ID 値に基づいて、対応するフォーラム名を照会します。同時にページ上にIDも表示されます。 select2プラグインは構築した

の内側span要素に名前を入れるので、span要素に隠しフィールドのname値を書き込みます。

コードをコピーします コードは次のとおりです:

Feiliu 製品セクション (Ajax 呼び出しリモート データ):

gt ;

セクション ID:

<script> <br>$(document).ready(function() { <BR> $(' #colum').select2({ <BR>minimumInputLength: 0, <BR>placeholder: 'セクションを選択', <BR>ajax: { <BR>url: "http://pm.feiliu.com/?c=try&a=ajax_diy", <SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">//<SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000"> URL を入力してくださいjsonp リクエストのアドレス <BR> /jsonpCallback: "testback", <BR> //jsonpCallback は、カスタムの jsonp コールバック関数名です。デフォルトはランダムな関数名です。 jQueryによって自動生成される「?」を記述することもできます。 jQuery はデータを自動的に処理します <BR>quietMillis: 100, <BR>data: function(name, page) { <BR>return { <BR>types: ["exercise"], <BR>limit: -1, <BR>q: name <BR>}; <BR>results: function(data, page) { <BR>return { results: data.items } <BR>} <BR>}, <BR>formatResult: function(exercise) { <BR>return "<div class='select2-user-result'>" + 運動.name + "</script>

";
} ,
formatSelection: function(運動) {
運動.name を返す
} $('#colum').change(function( ){
frm.submit();
});
var name = $("#columname").val();
if(name){
$("#s2id_colum").find("span") .text(name);
}
});



コードをコピーします。
コードは次のとおりです:

クラス pmc_try
{
パブリック関数 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");
}
}
パブリック関数 ajax_diy(){
$fid = $_GET['q'];
$callback = $_GET["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();
}
}
?>

モデルメソッド：

复制代码代码如下:

public static function get_forum_name_by_fid($fid)
{
$sql = "SELECT name FROM sq_forums WHERE fid='$ fid' ORDER BY thread_counter DESC ";
$data = pm_db11::result_first($sql);
$data を返す;
}
パブリック静的関数 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 thread_counter DESC";
$query = pm_db11::query($sql);
$data = pm_db11::fetch_all($query);
}
$data を返します。
}

さらに、突出提案効果として使用すると、表示名に含まれる承認文字を強調表示できます。これは、再選択 2 の formatResult 関数で処理することも、php で処理することもできます。
補足参考http://www.cnblogs.com/doinning/archive/2012/04/19/json-jsonp-jquery.html

http://www.bkjia.com/PHPjc/327146.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/327146.html技術記事前のハンドワークは、マウスで選択された機能のみを実行し、必要な機能をサポートするために必要な、完全な機能を下書きしました。