After receiving a question from my friend last few days about how to make the autocomplete, I decided to make a tutorial only. This tutorial will teach you to be able to make the autocomplete feature / autosuggestion in an input field in your web form. I will use the autocomplete jquery plugin and will be integrated in the framework CodeIgniter.
Autocompletenya own jQuery plugins you can download linked to this. For CodeIgniter itself can be downloaded at codeigniter.com to the latest version is 2.0 but I use ditutorial CI is still the version 1.7.3. Broadly speaking, who should be the same as version 2.0. One more note, for jQuery autocomplete plugin that I was a little modif jquery.autocomplete.js file section, because this plugin sends file search parameters to call ajax with $ _GET, whereas in CodeIgniter itself does not use $ _GET but $ _POST.
I'll include the source code for this tutorial and can be downloaded at this link. Once downloaded you can install on your localhost web server, in accordance with generally how you install CodeIgniter application. you simply change the file / www / system / application / config / config.php and find this line
PHP Code:
$ Config ['base_url'] = "http://localhost/demo_autocomplete_ci/";
/ * Change the following url in accordance with where you install it on your localhost * /
If you successfully installed it will look like this picture
For an explanation kodingnya we can start from the file / system / application / views / niko.php, these files play our template file for this tutorial.
PHP Code:
<! DOCTYPE HTML>This application has been set for the controller automatically opens niko.php as front page or pages indexnya. For these settings in the file / system / application / config / routes.php following dibaris
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Nikolius Luiso" />
<title> jQuery Autocomplete Demo </ title>
<! - Load jquery library framework ->
<Script type = "text / javascript" src = "<? Php echo base_url ()?> Js/jquery144.min.js"> </ script>
<! - Load library jquery autocomplete plugin ->
<Script type = "text / javascript" src = "<? Php echo base_url ()?> Js / jquery.autocomplete.js"> </ script>
<script type="text/javascript">
/ * This script is the script jquery autocomplete plugin to run it * /
$ (Function () {
/ * Find the element with id = "inputCari" * /
$ ("# InputCari"). Autocomplete ({
/ * Url autocomplete ajax reply destination * /
url: '<? php echo base_url ();?> index.php / search /',
/ * Result returned from the ajax was given a span tag to be red * /
showResult: function (value, data) {
return '<span style="color:red">' + value + '</ span>';
},
/ * Maximum number of items that will be displayed * /
maxItemsToShow: 8
});
});
</ Script>
<! - Needful load css file ->
<Link rel = "stylesheet" type = "text / css" href = "<? Php echo base_url ()?> Css / base.css">
<Link rel = "stylesheet" type = "text / css" href = "<? Php echo base_url ()?> Css / jquery.autocomplete.css">
<Link rel = "stylesheet" type = "text / css" href = "<? Php echo base_url ()?> Css / style.css">
</ Head>
<body>
<div id="container">
<h1> jQuery Autocomplete Demo </ h1>
<div align="center">
<form>
<span style="margin-right:30px;"> Search </ span>
<input type="text" size="35" id="inputCari" />
</ Form>
</ Div>
style="clear:both;" <br />
<div id="copyright" align="right">
Copyright 2011 <a href="http://nikolius-luiso.web.id" title=""> Nikolius Luiso </ a>
</ Div>
</ Div>
</ Body>
</ Html>
PHP Code:
$ Route ['default_controller'] = "niko";The main action of this tutorial is actually located below dizscript who call the jquery jquery autocomplete plugin and controller that will return a value when invoked by the plugin ajax. I include it again zscript js as follows
and content for niko controller located in / system / application / controllers / niko.php are as follows
PHP Code:
Niko class extends Controller {
Niko function ()
{
parent:: Controller ();
}
function index ()
{
/ * Call the view template we had over who is located in / system / application / views / niko.php * /
$ This-> load-> view ('niko');
}
}
PHP Code:
$ (Function () {And this is the content of the search controller who is located in / system / application / controllers / pencarian.php who jquery autocomplete plugin called by us earlier.
/ * Find the element with id = "inputCari" * /
$ ("# InputCari"). Autocomplete ({
/ * Url autocomplete ajax reply destination * /
url: '<? php echo base_url ();?> index.php / search /',
/ * Result returned from the ajax was given a span tag to be red * /
showResult: function (value, data) {
return '<span style="color:red">' + value + '</ span>';
},
/ * Maximum number of items that will be displayed * /
maxItemsToShow: 8
});
});
PHP Code:
class Search extends Controller {So that was the outline to make the autocomplete feature or autosuggestion in your web form. Quite simple is not it? Do not forget to download the source code of this tutorial for you to test yourself though more clearly what kind of how it works. You can also try directly through who I provide a demo page. As always, comments and suggestions are expected to make my spirit to write another articles. Thank you.
function search ()
{
parent:: Controller ();
}
function index ()
{
/ * Grab the key parameters being sent from the autocomplete jquery plugin earlier * /
$ Q = $ this-> input-> post ('q');
/ *
for the purposes of this tutorial is a direct list of data items declared in the form of an array,
cuman usually in practice will usually list these items will be in the query / generated from the database application
* /
$ Items = array (
"Great Bittern" => "Botaurus Stellaris',
"Little Grebe" => "Tachybaptus ruficollis",
"Black-necked Grebe" => "Podiceps nigricollis",
"Little Bittern" => "Ixobrychus minutus",
"Black-crowned Night Heron" => "Nycticorax nycticorax",
/ *
....
....
....
list items that will be returned
....
....
....
* /
"Madeira Little Shearwater" => "Puffinus baroli",
"House Finch" => "Carpodacus mexicanus",
"Green Heron" => "Butorides virescens",
"Solitary Sandpiper" => "Tringa solitaria",
"Heuglin's Gull" => "Larus heuglini"
);
/ * Parsing the data return and remove the items that match the keywords * /
foreach ($ items as $ key => $ value) {
if (strpos (strtolower ($ key), $ q)! == false) {
echo "$ key | $ valuen";
}
}
}
}
Demo Page dan Source Code
DownloadDemo dan Download Source Code
Tidak ada komentar:
Posting Komentar