Jquery token-input not working when populating data from database
Question
I am trying to populate data from database using jquery token-input plugin http://loopj.com/jquery-tokeninput/ .but nothing shows up. I wish to know where i am going wrong.
I ACCEPT ANY ALTERNATIVE APPROACH
Every example i search does not seem to work.
My index page
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<script type="text/javascript" src="src/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="styles/token-input.css" type="text/css" />
<link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />
<div>
<input type="text" id="tagcool" name="blah" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#tagcool").tokenInput("phpsearch.php", {
theme: "facebook",
preventDuplicates: true,
});
});
</script>
And my PHP page
<?php
$link = mysqli_connect("localhost","root","","dbname") or die("Couldn't make connection.");
$look = $_GET['q'];
$arr = array();
$rs = mysqli_query($link,"SELECT * FROM `country` WHERE name like '%".$look."%'");
# Collect the results
while($obj = mysqli_fetch_object($rs)) {
$arr[] = $obj;
}
# JSON-encode the response
$json_response = json_encode($arr);
# Optionally: Wrap the response in a callback function for JSONP cross-domain support
if($_GET["callback"]) {
$json_response = $_GET["callback"] . "(" . $json_response . ")";
}
# Return the response
echo $json_response;
?>
Example of my db
1 answers
solution1
2 2016-07-23 11:28:39
This works. You need to change a bit of the coding below according to your setup.
HTML
<!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">
<link rel="stylesheet" href="styles/token-input-facebook.css" type="text/css" />
</head>
<body>
<form name='jqueryAutocompleteForm' id='jqueryAutocompleteForm'>
<label for='query'>Search:</label>
<input type='text' name='q' class='form-control input-lg' id='query' placeholder='Please Start Typing'>
<input type='submit' value='Submit' class='btn btn-info'>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="src/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#query").tokenInput("php.php", {
theme: "facebook"
});
});
</script>
</body>
</html>
Note: Be sure the path to your "jquery.tokeninput.js" and the "php to json", in my case "php.php" and yours "phpsearch.php" is correct.
The php.php
<?php
//open connection to mysql db
$connection = mysqli_connect("localhost","root","","tags") or die("Error " . mysqli_error($connection));
$s = $_GET["q"];
//fetch table rows from mysql db
$sql = "SELECT name from mytable WHERE name LIKE '%".$s."%'";
$result = mysqli_query($connection, $sql) or die("Error in Selecting " . mysqli_error($connection));
//create an array
$emparray = array();
while($row =mysqli_fetch_assoc($result))
{
$emparray[] = $row;
}
echo json_encode($emparray);
//close the db connection
mysqli_close($connection);
?>
Replace the select query, "$sql = "SELECT name from mytable WHERE name LIKE '%".$s."%'";" with yours.
In case you need to know, my database has just 1 table with 2 columns 1.id, 2, name.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.