Jay Gorio Jay Gorio - 2 years ago 62
Javascript Question

How to use ajax auto complete to display values from a MySQL database when user types a letter

I am having problem with displaying the data from MySQL. I want that when I type a letter in the input field the values coming from the database will display the related values.

For example I type A, and it will show all the vales relating to that product. Below is my code - please provide your suggestions.

<script type="text/javascript">
var hxmlhttp = false;
//for newer browser except ie6
xmlhttp = new XMLHttpRequest();
//for ie6 and below
xmlhttp = new ActiveXObjectt("Microsoft.XMLHTTP");
function askGoogleSuggest(){
var input = document.getElementById("textField");
getData("select.php?qu=" + input.value,"targetDiv");
var targetDiv = document.getElementById("targetDiv");
targetDiv.innerHTML = "<div></div>";
function getData(dataSource, divId){
var obj = document.getElementById(divId);

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status==200){
obj.innerHTML = xmlhttp.responseText;
<h2>Langpayan Trademark</h2>
<form >
Search for <input type="text" id="textField"
name="textField" onkeyup = "askGoogleSuggest()">

<div id="targetDiv">
<p>it will display values</p>


$dbc = mysqli_connect('localhost','root','black98765','activity_8a')
OR die("Cannot connect to MySql: ". mysqli_connect_error());
$display = "SELECT bug.* , product.*, hardware.hardware_brand, software.software_name, solution.solution_name, bug_hardware.*
FROM bug
JOIN product ON bug.product_no = product.product_no
JOIN bug_hardware ON bug.bug_no = bug_hardware.bug_no
JOIN hardware ON hardware.hardware_no = bug_hardware.hardware_no
JOIN software ON software.software_no = bug_hardware.software_no
JOIN solution ON solution.bug_no = bug.bug_no
WHERE product_name like '%on%'";
$re = mysqli_query($dbc, $display);
echo "<table border=1 id='table_form'>
<th>Product Name </th>
<th>Name of Bug </th>
<th>Brand Name</th>
<th>Operating System</th>

while($row = mysqli_fetch_assoc($re)){
echo "<tr>";
echo "<td>".$row['product_name']."</td>";
echo "<td>".$row['bug_name']."</td>";
echo "<td>".$row['hardware_brand']."</td>";
echo "<td>".$row['software_name']."</td>";
echo "<td>".$row['solution_name']."</td>";
echo "</tr>";

echo "</table>";
echo "Cannot fetch data";

Answer Source

The problem got solved in a dialogue:

The function getData missed the divId parameter when called inside the askGoogleSuggest function.

Also the line WHERE product_name like '%on%'"; had to be changed to WHERE product_name like '".$_GET['qu']."%'"; to behave as expected by OP

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download