Using Ajax to create a word hint. Kind of like when you search Google and it suggests words.

Check out an example of this here

Below is the html and javascript on the the main page. The javascript function on this page calls on the search.inc.php page which contains your database information.



<!DOCTYPE html >
<head>

<title>Auto Check</title>


<script>

function findmatch() 
{	
	if (window.XMLHttpRequest)
	{
		xmlhttp = new XMLHttpRequest();	
	}
	else
	{
		xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');	
	}
	
	xmlhttp.onreadystatechange = function()
	{
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
		{
			document.getElementById('results').innerHTML = xmlhttp.responseText;	
		}
	}	
    /* This is where the function sends your search_text to the search.inc.php */
	xmlhttp.open('GET', 'search.inc.php?search_text=' + document.search.search_text.value, true);
	xmlhttp.send();
		
}
	
</script>

</head>

<body>

  <div id="form">		
				<form id="search" name="search" >
					<h1>- Auto feedback -</h1>	   
          
					<label  for="username">Username:</label>
					<input type="text" name="search_text" onkeyup = "findmatch();" />
           <!-- After the user presses a key and releases it, the findmatch() function is called-->
				</form>

     <div id="results">                
     		<!-- This is where the auto output will be displayed that is returned from search.inc.php 
                 You can echo something out here if you have php on this page to handle your form. For example: 
                 input errors. They will be replaced with the word hints automatically until the user hits submit.
                 Note: there is no submit button for this form because this is just an example for you. Build to suit your needs -->
     </div> 				
   </div>

</body>

</html>

Below is the php that processes the typing you do in the form and returns the appropriate message. This would be all the information in the search.inc.php page

<?php

/*==========  CONNECT TO YOUR DATABASE  ===========*/

				//========================= Below is your database information from your host ===============================
						$db_User_Name = '*************';
						$db_password = '************';     // Replace asterisks with your database specific information
						$db_Database_Name = '************';
						$db_Host_Name = '*****************';
				//===========================================================================================================
						
					

	if (isset($_GET['search_text']))
	{
		$search_text = $_GET['search_text'];	
	}
	
	if(!empty($search_text))
    {
		/*========================================================================================================================================================
		
		 $query = mysql_query("SELECT username FROM practice_table WHERE username LIKE '".mysql_real_escape_string($search_text)."%'");
		 
		******* This commented out $query would be needed instead of the following if you didn't need an exact match of what you are typing in the form *********
		=========================================================================================================================================================*/
		
		$query = mysql_query("SELECT username FROM practice_table WHERE username = '".mysql_real_escape_string($search_text)."'");
		
		while ($query_row = mysql_fetch_assoc($query))
		{
			
			//echo $query_row['usr'].'<br>'; /****** This line would return any word like the one you are entering...kind of like when you Google something *****/
											 /* Just use the commented out $query above and this echo...wouldn't need the rest of the code below in that case   */
			$taken = 'Username taken!';
			$notTaken = '';
			
		}
		if($taken != 'Username taken!')
		{
			$notTaken = 'Username available!';	
		}
		echo '<div  style="color:red;  ">'.$taken.'</div>';
		echo '<div  style="color:green; ">'.$notTaken.'</div>';
		
    }
	

?>