PHP+jQuery automatic completion function source code
- 2020-06-03 05:56:05
- OfStack
In front of manually wrote a drop-down automatic completion function, write simple, only to achieve mouse selection function, do not support keyboard selection. Since this feature will be used in many areas of the project, you need to work on it carefully. It is found that the functionality of the select2 plug-in meets the current requirements.
During the process of using jquery plug-in select2, I encountered a few doubts that the data can be returned correctly whether through json or through jsonp. However, the items in the drop-down list cannot be selected, and the mouse and keyboard selections are invalid.
It turned out that the select2 plug-in was selected by implementation based on the id field in the data. So whether json or jsonp, the data returned by ajax must have the id field. If there is no such id in the actual database, one can also be constructed artificially, but the uniqueness of id should be guaranteed.
Here is the template file try_diy.tpl source code:
Including colum input box where it is a plug-in, but the return value is id, when the page is submitted we require the user to select section presented to the user, my way is according to the form submission id query the corresponding page name name, when the controller receives id value and is not empty, the section id name values corresponding to the name appear on the page displayed at the same time. Because the select2 plug-in puts the name name in the construct < div id="s2id_colum" > < /div > In the inner span element, so I'll write the name value of the hidden field to the span element after the query results page loads.
Here is an example of a controller:
model method:
In addition 1, the query key contained in name can be highlighted to highlight the prompt effect. This point can be processed in select2's formatResult function or in php. This 1 point source code I will not write here.
Supplementary reference http: / / www. cnblogs. com dowinning/archive 2012/04/19 / json - jsonp - jquery. html
During the process of using jquery plug-in select2, I encountered a few doubts that the data can be returned correctly whether through json or through jsonp. However, the items in the drop-down list cannot be selected, and the mouse and keyboard selections are invalid.
It turned out that the select2 plug-in was selected by implementation based on the id field in the data. So whether json or jsonp, the data returned by ajax must have the id field. If there is no such id in the actual database, one can also be constructed artificially, but the uniqueness of id should be guaranteed.
Here is the template file try_diy.tpl source code:
Including colum input box where it is a plug-in, but the return value is id, when the page is submitted we require the user to select section presented to the user, my way is according to the form submission id query the corresponding page name name, when the controller receives id value and is not empty, the section id name values corresponding to the name appear on the page displayed at the same time. Because the select2 plug-in puts the name name in the construct < div id="s2id_colum" > < /div > In the inner span element, so I'll write the name value of the hidden field to the span element after the query results page loads.
<!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> Flying flow product section (Ajax Invoking remote data ):</label>
<input type="hidden" class="bigdrop" id="colum" name="colum" style="width:600px" value=""/>
<input type="hidden" id="columname" value="<{$frmname}>" name="columname" />
<p> section ID : <{$frmid}></p>
</form>
<script>
$(document).ready(function() {
$('#colum').select2({
minimumInputLength: 0,
placeholder: ' Select section ',
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"> provide jsonp The request of url address </SPAN>
dataType: 'jsonp',
jsonp: "callback",// Passed to a request handler or page for retrieval jsonp The name of the callback function (1 As the default for :callback , can be omitted )
//jsonpCallback:"testback",
//jsonpCallback It's custom jsonp Name of the callback function, default jQuery Automatically generated random function name, can also be written "?" . jQuery Data will be processed automatically
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>
Here is an example of a controller:
class pmc_try
{
public function diy(){
if($_POST['colum'])
{
$fid = $_POST['colum'];
$fname = mod_forum::get_forum_name_by_fid($fid);// According to the id take 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"]; // Default function name 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.')';// structure jonsp
exit();
}
}
?>
model method:
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)
{
// product ID : tpid Section, ID : fid
$data = array();
if($tpid && $fid){// structure 1 a id Fields can also be constructed by processing the query results
$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;
}
In addition 1, the query key contained in name can be highlighted to highlight the prompt effect. This point can be processed in select2's formatResult function or in php. This 1 point source code I will not write here.
Supplementary reference http: / / www. cnblogs. com dowinning/archive 2012/04/19 / json - jsonp - jquery. html