magicsuggest

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="MagicSuggest is a multiple selection combo box built for bootstrap themes"> <meta name="author" content="Nicolas Bize"> <link rel="shortcut icon" href="http://nicolasbize.com/magicsuggest/assets/ico/favicon.ico"> <title>MagicSuggest - Tutorial</title> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/css/custom.css" rel="stylesheet"> <link href="assets/lib/highlightjs/styles/default.css" rel="stylesheet"> <script type="text/javascript" src="assets/lib/highlightjs/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"></script> </head> <body> <a id="forkme_banner" href="https://github.com/nicolasbize/magicsuggest">View on GitHub</a> <div class="site-wrapper"> <div class="site-wrapper-inner"> <div class="cover-container"> <div class="masthead clearfix"> <div class="inner"> <h3 class="masthead-brand">MagicSuggest</h3> <ul class="nav masthead-nav"> <li><a href="index.html">Home</a></li> <li><a href="examples.html">Examples</a></li> <li><a href="doc.html">Documentation</a></li> <li class="active"><a href="tutorial.html">Tutorial</a></li> </ul> </div> </div> </div> <div class="tutorial"> <div class="container"> <h1>Tutorial Part Three</h1> <p>Instanciating the MagicSuggest component.</p> <div class="row"> <div class="col-md-12"> <h3>Importing the library</h3> <p>This is where things start to get interesting.</p> <p>To import the MagicSuggest component into the project, download the latest archive located at the bottom of the <a href="index.html">front page</a>, and place the contents into a <code>lib/magicsuggest</code> folder</p> <p>For testing purposes, we will be using the unminified version of the component but you should really be using the minified version in your production environments.</p> <h3>Displaying our Component</h3> <h3><code>index.php</code></h3> <p>We replace the checkboxes with a new <code>input</code> tag which will become our component. We also included links to load our CSS and javascript file</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>MagicSuggest Tutorial</title> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="lib/magicsuggest/magicsuggest.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container"> <h1>Hello, world!</h1> <form action="subscribe.php" method="post"> <div class="form-group"> <label>First name</label> <input class="form-control" name="firstname"/> </div> <div class="form-group"> <label>Last name</label> <input class="form-control" name="lastname"/> </div> <div class="form-group"> <label>Countries</label> <input id="ms" class="form-control" name="countries[]"/> </div> <input type="submit" class="btn btn-success pull-right" value="Submit"/> </form> </div>  <script src="lib/jquery/jquery-1.11.1.min.js"></script>  <script src="lib/bootstrap/js/bootstrap.min.js"></script> <script src="lib/magicsuggest/magicsuggest.js"></script> <script src="js/script.js"></script> </body> </html></code></pre> <h3><code>js/script.js</code></h3> <p>This is a custom script that we load <strong>after</strong> having loaded the magicsuggest component. It takes care of creating the component after the page markup has been rendered. We initialize the component with 3 parameters:</p> <ul> <li><code>data</code> here points to the URL from which to fetch the data. Note that we could have directly put an array of JSON objects here. But we will use the <code>get_countries.php</code> script to perform the same SQL query that we did in Part 2.</li> <li><code>valueField</code> tells the component which record field he should consider as values. This means that when we use the <code>setValue</code> method, we should indicate some <code>idCountry</code>, etc.</li> <li><code>displayField</code> tells the component which record field he should display in the combo box</li> </ul> <pre><code>$(function() { $('#ms').magicSuggest({ data: 'get_countries.php', valueField: 'idCountry', displayField: 'countryName' }); });</code></pre> <h3><code>subscribe.php</code></h3> <p>No changes here. You can see that results from the component behave the same as the checkboxes from Part 2.</p> <h3><code>get_countries.php</code></h3> <p>This file performs the query and returns the results in an array of JSON objects. We have to perform a small UTF-8 mapping as our countries contain some weird accents and json_encode requires some utf-8.</p> <pre><code><?php $mysql = new mysqli('localhost','root','root','magicsuggest', 8889); $result = $mysql->query("select * from countries"); $rows = array(); while($row = $result->fetch_array(MYSQL_ASSOC)) { $rows[] = array_map("utf8_encode", $row); } echo json_encode($rows); $result->close(); $mysql->close(); ?> </code></pre> <p>We end up with our combo box that displays all the countries. Inspect the component as you make selections to see how it behaves.</p> <div class="well"> <h4>Wrapping up...</h4> <a href="tutorial/3.html">View the results</a><br/> <a href="tutorial/3/3.zip">Download the files for the tutorial</a><br/> <br/> <a href="tutorial-4.php.html">Go to part 4</a><br/> </div> </div> </div> </div> </div> <div style="height:200px"></div> </div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-5470193-5']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>