Pages

Friday, March 23, 2018

How to suggest values from database HTML/CSS

In this tutorial you'll learn how to suggest values from database to an input field.

Demo:


Step 1. Download the JQuery file first.
Step 2. Copy the codes given below and past it to your files.

database_suggesion.php

<!doctype html>

<!-- Powered by Computer Master -->


<html>
<title>Computer Master Database Suggestion</title>


<body>

<h2> Suggest users from database</h2>

<!-- Input field for entry -->
<input list="user" id="user_name" onkeyup="suggest_user()" />

<!-- database entries will show in this datalist -->
<datalist id="user">
</datalist>

<script src="jquery-3.3.1.min.js"></script>
<script>

function suggest_user(){
var user_name = document.getElementById('user_name').value;
/* This function send data to check.php file */
    $.post("check.php",
{
user: user_name
},

/* This function recieve data from check.php file */
function(data, status){
document.getElementById('user').innerHTML = data ;
}
);

}

</script>



</body>

</html>

check.php

<?php
 
/* Configure this to your own database */
    $con = mysqli_connect("localhost", "root", "", "simple tutorial");

    if(isset($_POST['user'])){

$q='SELECT `user_name` FROM `user` WHERE `user_name` LIKE "%'.$_POST['user'].'%" ';
        $r = mysqli_query($con, $q) ;

while($row = mysqli_fetch_assoc($r)){

/* It return data to datalist in the database_suggestion.php file */
echo '<option value="'.$row['user_name'].'"> ' ;

}

}

?>

No comments:

Post a Comment