Instanciating the MagicSuggest component.
This is where things start to get interesting.
To import the MagicSuggest component into the project, download the latest archive located at the bottom of the
front page, and place the contents into a lib/magicsuggest folder
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.
index.phpWe replace the checkboxes with a new input tag which will become our component. We also included links
to load our CSS and javascript file
<!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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="lib/jquery/jquery-1.11.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/magicsuggest/magicsuggest.js"></script>
<script src="js/script.js"></script>
</body>
</html>js/script.jsThis is a custom script that we load after 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:
data 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 get_countries.php script to perform the same
SQL query that we did in Part 2.valueField tells the component which record field he should consider as values. This means that when
we use the setValue method, we should indicate some idCountry, etc.displayField tells the component which record field he should display in the combo box$(function() {
$('#ms').magicSuggest({
data: 'get_countries.php',
valueField: 'idCountry',
displayField: 'countryName'
});
});subscribe.phpNo changes here. You can see that results from the component behave the same as the checkboxes from Part 2.
get_countries.phpThis 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.
<?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();
?>
We end up with our combo box that displays all the countries. Inspect the component as you make selections to see how it behaves.