Hand-written in front of the automatic completion of a full function, write simple, only the mouse to select the function, does not support keyboard selection. Because the project has many places to use this function, therefore needs to do attentively. Discover that the functionality of the Select2 plug-in can meet current requirements.
In the process of using the jquery plug-in select2, there are some doubts, whether it is through the JSON data or through the JSONP way to fetch the data, can be returned correctly. However, the entries in the Drop-down list are not selected, and the mouse and keyboard selections are not valid.
It was later found that the Select2 plug-in was selected with the ID field in the data. So the data returned by either JSON or JSONP,AJAX must have an ID field. If such an ID is not present in the actual database, one can be constructed artificially, but the ID's uniqueness is guaranteed.
This lists the template files Try_diy.tpl source code：
Where the Colum input box is the role of plug-ins, but the value returned is the ID, when the page is submitted we need to the user's choice of the section to be presented to the user, my practice is based on the form submitted by ID query the corresponding layout name, when the controller received the ID value and not empty, The name value corresponding to the plate ID is also rendered on the page. Since the Select2 plug-in puts the name names in the span element of the constructed <div id= "S2id_colum" ></div>, I write the name value of the hidden field to the span element after the query results page loads.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<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> Fei Product section (Ajax call 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> id:<{$frmid}></p>
</form>
<script>
$ (document). Ready (function () {
$ (' #colum '). Select2 ({
minimuminputlength:0,
PLACEHOLDER: ' Select the Forum ',
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 URL address for JSONP request </SPAN>
DataType: ' Jsonp ',
JSONP: "Callback",//passed to the request handler or page, to obtain the JSONP callback function name (general default is: callback, so can be omitted)
Jsonpcallback: "Testback",
Jsonpcallback is a custom JSONP callback function name, which defaults to the random function name that jquery automatically generates, and also writes "?", and jquery automatically processes the data
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>
The following is an example of a controller:
Copy Code code as follows:
Class Pmc_try
{
Public Function DIY () {
if ($_post[' Colum '])
{
$fid = $_post[' Colum '];
$fname = Mod_forum::get_forum_name_by_fid ($FID);//Name by ID
Pm_tpl::assign (' Frmid ', $fid);
Pm_tpl::assign (' Frmname ', $fname);
PM_TPL::d isplay ("Try_diy");
}else
{
PM_TPL::d isplay ("Try_diy");
}
}
Public Function Ajax_diy () {
$fid = $_get[' Q '];
$callback = $_get["Callback"]; Default function name is 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. ') '; /Construction JONSP
Exit ();
}
}
?>
Model method:
Copy Code code as follows:
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, Forum Id:fid
$data = Array ();
if ($tpid && $fid) {//Construct an ID field, or it can be machined by the query result
$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;
}
To add, the actual use of the highlighting effect, you can highlight the query keyword contained in name, which can be select2 in the FormatResult function, can also be processed in PHP. This point of the source code I will not write here.
Supplementary reference http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
