Multi select with comma separated using php, Mysql, Jquery, Json.
Hi all,
It's very simple to create the multiselect comma separated. You have to create two files, one is index.html or index.php and another should be getdata.php. First page can be html also because we are not using any server side code on that..
Here is:
1. index.html
2. getdata.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
// Create connection
$conn = mysql_connect($servername, $username, $password);
mysql_select_db('painter',$conn);
// Check connection
if ( !isset($_GET['term']) )
exit;
$term = $_REQUEST['term'];
$data = array();
$sql = mysql_query('select * from user where name like "'. mysql_real_escape_string($term) .'%" order by name asc limit 0,10');
while( $row = mysql_fetch_assoc($sql))
{
$data[] = array(
'label' => $row['name'].', '. $row['email'],
'value' => $row['name']); // here i am taking name as value so it will display name in text field, you can change it as per your choice.
}
echo json_encode($data);
flush();
?>
You should have a table name user with entity name and email.
All done. :)
Feel free to reach me. :)
Hi all,
It's very simple to create the multiselect comma separated. You have to create two files, one is index.html or index.php and another should be getdata.php. First page can be html also because we are not using any server side code on that..
Here is:
1. index.html
<!DOCTYPE html>
<html>
<head>
<!-- Jquery Packages -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<!-- Jquery Package End -->
<script type="text/javascript">
$(document).ready(function(){
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#txtinput" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "getdata.php",{ //Url of controller
term: extractLast( request.term )
},response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 1 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( "," );
return false;
}
});
});
});
</script>
</head>
<body>
<!-- Your Input Text Box-->
<input type="text" id="txtinput" size="20" />
</body>
</html>
2. getdata.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
// Create connection
$conn = mysql_connect($servername, $username, $password);
mysql_select_db('painter',$conn);
// Check connection
if ( !isset($_GET['term']) )
exit;
$term = $_REQUEST['term'];
$data = array();
$sql = mysql_query('select * from user where name like "'. mysql_real_escape_string($term) .'%" order by name asc limit 0,10');
while( $row = mysql_fetch_assoc($sql))
{
$data[] = array(
'label' => $row['name'].', '. $row['email'],
'value' => $row['name']); // here i am taking name as value so it will display name in text field, you can change it as per your choice.
}
echo json_encode($data);
flush();
?>
You should have a table name user with entity name and email.
All done. :)
Feel free to reach me. :)
