PHP+jQuery 자동 보완 기능 원본

5762 단어 jQuery자동 완성
앞에 수동으로 밑에 있는 자동 보완 기능을 썼는데 간단하게 썼고 마우스 선택 기능만 실현했으며 키보드 선택은 지원되지 않았다.프로젝트는 이 기능을 많이 사용해야 하기 때문에 심혈을 기울여 해야 한다.select2 이 플러그인의 기능이 현재 수요를 충족시킬 수 있음을 발견했습니다.jquery 플러그인select2를 사용하는 과정에서 json 데이터를 입든 jsonp 방식으로 데이터를 취하든 정확하게 되돌릴 수 있다는 의문이 생겼다.그러나 드롭다운 목록에 있는 항목은 선택될 수 없으며 마우스와 키보드 선택에 무효입니다.나중에 select2 플러그인이 선택되었을 때 데이터의 id 필드를 기준으로 하는 것을 발견했습니다.따라서 json이든 jsonp든 aax가 되돌아오는 데이터는 id 필드를 가져야 합니다.만약 실제 데이터베이스에 이런 id가 존재하지 않는다면 인위적으로 하나를 구성할 수도 있지만 id의 유일성을 확보해야 한다.템플릿 파일 목록try_diy.tpl의 원본 코드: 그 중에서colum 입력 상자는 플러그인 역할을 하는 곳이지만 되돌아오는 값은 id입니다. 페이지가 제출된 후에 사용자가 선택한 블록을 다시 사용자에게 보여야 합니다. 제 방법은 폼이 제출한 id 조회에 대응하는 섹션 이름name입니다. 컨트롤러가 id 값을 받고 비어 있을 때 블록 id에 대응하는 이름name 값을 페이지에 보여줍니다.select2 플러그인은name 이름을 구조의 내층의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="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">//</SPAN><SPAN style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000"> jsonp url </SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataType: 'jsonp',
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;jsonp: "callback",// , jsonp ( :callback, )
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//jsonpCallback:"testback",
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//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();
}
}
?>
모델 방법:
 
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

좋은 웹페이지 즐겨찾기