CODEWITHSUNDEEP
phpjqueryajaxautocomplete
prit2192
prit2192

Reputation: 49

autocomplete with ajax php and mysql

I have a form with two textboxes and a submit button. The second box autocompletes the input. On submit, the page refreshes and displays a table with contents of the two textboxes(using ajax).

The autocomplete array is stored in mysql. The textboxes' values are stored in a separate table in mysql.

These are the codes:

1) autotesting.html

<html>
<head>
<title>PHP using AJAX</title>
<script type=""text/javascript" src="prototype.js"></script>
<link rel="stylesheet" href="autocomplete.css" type="text/css" media="screen">
<script src="jquery.js" type="text/javascript"></script>
<script src="dimensions.js" type="text/javascript"></script>
<script src="autocomplete.js" type="text/javascript"></script>

<script type="text/javascript">

var time_variable;

function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object

function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call

 if(xmlhttp) {
    var txtname = document.getElementById("txtname");
    var searchField = document.getElementById("searchField");
    xmlhttp.open("POST","autotesting2.php",true); //calling testing2.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("txtname="+ txtname + "&searchField=" + searchField); //Posting to PHP File
  }
}

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}




$(function(){
        setAutoComplete("searchField", "results", "autocomplete.php?part=");
    });
</script>

</script>
<body>
<form name="myForm">
<table>
 <tr>
  <td>Add New Item Type</td>

 <td>

    <p id="auto">
        <label>Colors: </label><br>
        <input type="text" id="txtname" name="txtname" /><br><br>
        <input id="searchField" name="searchField" type="text" /><br><br>

</p>
</td>   
</tr>
 <tr>
  <td colspan="2"><input type="button" value="Add new item" onclick="ajaxFunction();" />


 </tr>
</table>
<div id="message" name="message"></div>
</form>
</body>
</head>
</html>

2) autotesting2.php

<?php
$conn = mysql_connect("localhost","demo","demo");
if(! $conn )
{
  die('Could not connect: ' . mysql_error());
}
 $txtname = $_POST["txtname"];
$searchField = $_POST["searchField"];
$sql = "INSERT INTO test3 (txtname,searchField) VALUES ('$txtname','$searchField')";
mysql_select_db('test_db'); 
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
  die('Could not enter data: ' . mysql_error());
}
echo "<table border='2' cellspacing='5' cellpadding='5'>";
$result=mysql_query("SELECT * FROM test3"); 
while($row=mysql_fetch_array($result)) 
  {
  echo "<tr>";
  echo "<td>" . $row['txtname'] . "</td>";
  echo "<td>" . $row['searchField'] . "</td>";
  echo "</tr>";
  }
echo "</table>";echo "<br>";
mysql_close($conn); 
?>

3) autocomplete.php

<?php

$link = mysql_connect('localhost', 'demo', 'demo');
if (!$link) {
   die('Could not connect: ' . mysql_error());
}
if (!mysql_select_db("test_db")) {
   echo "Unable to select test_db: " . mysql_error();
   exit;
}

$result = mysql_query("SELECT name FROM  sks_color");
while ($row = mysql_fetch_assoc($result)) {
        $colors[]=$row['name'];
}
mysql_free_result($result);
mysql_close($link);

// check the parameter
if(isset($_GET['part']) and $_GET['part'] != '')
{
    // initialize the results array
    $results = array();

    // search colors
    foreach($colors as $color)
    {
        // if it starts with 'part' add to results
        if( strpos($color, $_GET['part']) === 0 ){
            $results[] = $color;
        }
    }

    // return the array as json with PHP 5.2
    echo json_encode($results);
}

The code is working fine until the page refreshes and table contains cells with [object HTMLInputEle] instead of content of textboxes. also, the table in database gets inserted with [object HTMLInputEle].

What is the problem ? Please help.

Upvotes: 1

Views: 3407

Answers (1)

Francis Lewis
Francis Lewis

Reputation: 8980

First, Why are you loading jQuery if you're not going to use it? jQuery already has everything you need to do AJAX requests, so you may want to give it a try (especially since you're loading it) instead of creating your own xmlhttp object.

Next, if you're trying to get autocomplete working, since you already have jQuery loaded, you may also want to load the jQuery UI Then you can use the jQuery UI autocomplete.

That should be everything you're trying to do here.

Upvotes: 7

Related Questions