如何在PHP項(xiàng)目中利用jQuery實(shí)現(xiàn)一個(gè)自動(dòng)補(bǔ)全功能

發(fā)布時(shí)間：2021-01-16 10:02:14 來(lái)源：億速云閱讀：154 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

如何在PHP項(xiàng)目中利用jQuery實(shí)現(xiàn)一個(gè)自動(dòng)補(bǔ)全功能？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

代碼如下:

<!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>飛流產(chǎn)品版塊 (Ajax調(diào)用遠(yuǎn)程數(shù)據(jù)):</label>
<input type="hidden" class="bigdrop" id="colum" name="colum" 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 >//</SPAN><SPAN > 提供jsonp請(qǐng)求的url地址</SPAN>
            dataType: 'jsonp',
            jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名(一般默認(rèn)為:callback，故可省略)
            //jsonpCallback:"testback",
            //jsonpCallback是自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可寫(xiě)"?"，jQuery會(huì)自動(dòng)處理數(shù)據(jù)
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>

下面是控制器的例子：

復(fù)制代碼代碼如下:

class pmc_try
{
public function diy(){
if($_POST['colum'])
{
$fid = $_POST['colum'];
$fname = mod_forum::get_forum_name_by_fid($fid);//根據(jù)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"]; //默認(rèn)函數(shù)名為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.')';//構(gòu)造jonsp
exit();
}
}
?>

model方法：

復(fù)制代碼代碼如下:

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)
{
//產(chǎn)品ID：tpid，版塊ID：fid
$data = array();
if($tpid && $fid){//構(gòu)造一個(gè)id字段，也可以通過(guò)對(duì)查詢結(jié)果加工構(gòu)造
$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;
}

看完上述內(nèi)容，你們掌握如何在PHP項(xiàng)目中利用jQuery實(shí)現(xiàn)一個(gè)自動(dòng)補(bǔ)全功能的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

如何在PHP項(xiàng)目中利用jQuery實(shí)現(xiàn)一個(gè)自動(dòng)補(bǔ)全功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽