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値を書き込みます。

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

<スクリプト src=" ./static/js/select2-3.3.2/select2.js">

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

gt ;

セクション ID: <{$frmid}>

<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><SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000"> URL を入力してくださいjsonp リクエストのアドレス </SPAN> <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 + "</div>"; <br>} , <br>formatSelection: function(運動) { <br>運動.name を返す <br>} $('#colum').change(function( ){ <br>frm.submit(); <br>}); <br>var name = $("#columname").val(); <br>if(name){ <br>$("#s2id_colum").find("span") .text(name); <br>} <br>}); <br></script>


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

クラス 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技術記事前のハンドワークは、マウスで選択された機能のみを実行し、必要な機能をサポートするために必要な、完全な機能を下書きしました。