Here the first page index.php
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Select Option from MySQL Database</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Autocomplete Select Option from MySQL Database</h2>
<form>
<label for="autocomplete">Search:</label>
<div style="display: flex; flex-direction:column">
<input type="text" id="autocomplete" name="autocomplete">
<select id="selectOption" style="display:none;" size="15" style="width:fit-content"></select>
</div>
</form>
<script>
$(document).ready(function(){
$('#autocomplete').on('input', function(){
var inputVal = $(this).val();
$.ajax({
type: "POST",
url: "material.php",
data: {term: inputVal},
success: function(data){
$('#selectOption').html(data).show();
}
});
});
$('#selectOption').on('change', function(){
$('#autocomplete').val($(this).val());
$(this).hide();
});
});
</script>
</body>
</html>
here the second page for the finding the item in php
<?php
include("connect.php");
// Get input value
$term = $_POST['term'];
// Query database
$sql = "SELECT * FROM materialent WHERE matedesc LIKE '%$term%'";
$result = $store->query($sql);
// Generate options
$options = '';
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$options .= '<option value="' . $row['matedesc'] . '">' . $row['matedesc'] . '</option>';
}
}
// Return options
echo $options;
$store->close();
?>
so finally get the access of PHP data
Comments
Post a Comment