jQuery Editable Select is a jQuery plugin that transforms a select into an input field where single elements are shown in real-time according to the entered characters. It scales down to a real select list when javascript is not available.
https://github.com/indrimuska/jquery-editable-select
See demos here: http://indrimuska.github.io/jquery-editable-select/
CREATE TABLE `country` (
`id` int(6) NOT NULL,
`country` varchar(250) NOT NULL DEFAULT ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
CREATE TABLE `tbl_user` (
`userid` int(11) NOT NULL,
`fullname` varchar(50) NOT NULL,
`country` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
//index.php
<!DOCTYPE html>
<html>
<head>
<title>Editable Select Box using PHP Mysql database and jQuery Ajax</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="http://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
</head>
<body>
<?php
include('dbcon.php');
$result = $conn->query("SELECT * FROM country ORDER BY country ASC");
?>
<div class="container">
<br />
<h2 align="center">Editable Select Box using PHP Mysql database and jQuery Ajax</h2><br />
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<form method="post" id="sample_form">
<div class="form-group">
<label>Enter Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label>Select Country</label>
<select name="country" id="country" class="form-control">
<?php
foreach($result as $row)
{
echo '<option value="'.$row["country"].'">'.$row["country"].'</option>';
}
?>
</select>
</div>
<div class="form-group">
<input type="submit" name="Save" id="save" class="btn btn-success" value="Save" />
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#country').editableSelect();
$('#sample_form').on('submit', function(event){
event.preventDefault();
if($('#name').val() == '') {
alert("Enter Name");
return false;
}else if($('#country').val() == ''){
alert("Select Country");
return false;
}else{
$.ajax({
url:"insert.php",
method:"POST",
data:$(this).serialize(),
success:function(data)
{
alert(data);
$('#sample_form')[0].reset();
}
});
}
});
});
</script>
</body>
</html>
insert.php
//insert.php
<?php
include('dbcon.php');
$name = $_POST["name"];
$country = $_POST["country"];
$sql = "INSERT INTO tbl_user(fullname, country) VALUES ('$name', '$country')";
$conn->query($sql);
echo "Record Successfully added";
?>
insert.php
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
