[lordmerlin]

Hi

I'm trying to integrate a livesearch function for my website. I had a look at bitflux's livesearch, and google suggest, but could not get either of them working on my site.

What I would like to accomplish is as follows:
I have a DB table with users, and want to do a search on 4 fields, id, firstname, middlename, lastname, and then return those fields to a form, which has quite a bit of form fields. Thus, I want to display firstname, middlename and lastname in three different form fields, and have the id field as a hidden form field.

Can someone please direct me into the right direction as I'm pulling my hair out, and need to get this up and running ASAP.

Your help, suggestions, and samples will be HIGHLY appreciated

[ben.periton]

This is what I do when I have a lot of fields to fill in.

PHP Code:

lookup.php

<?

// Search for the data

$search_string = $_GET['search'];



// Make an array of the data you want to output to the javascript

$details = array(

            'Firstname' => 'Bill',

            'Lastname' => 'Gates',

            'Email' => 'bill@gates.com'

            );



// This converts it from a PHP array to a javascript array

function phpArrayToJsArray($name,$array,$prePend='var ') {

   if (is_array($array)) {

       $result = $name.' = new Array();'."\n";

       foreach ($array as $key => $value) {

           $result .= phpArrayToJsArray($name.'["'.$key.'"]',str_replace("\r\n",'\n', $value),'');

       }

   } else {

       $result = $name.' = "'.$array.'";'."\n";

   }

   return $prePend.$result;

}



// Create the javascript array then print it

$data = phpArrayToJsArray('Data',$details);

print $data;

?>

This is the code you would put on the page you want to search from.

Code:

<script language="javascript" type="=text/javascript">
var xmlhttp = false;
        
// If the user is using Mozilla/Firefox/Safari/etc
if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.overrideMimeType('text/xml');
} else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

function getFields() {
	var search = document.getElementById('search').value;
	var url = 'lookup.php?search='+search; // Change to suit your script name
	
	xmlhttp.open('GET', url, true);
	
	xmlhttp.onreadystatechange = function() {
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			eval(xmlhttp.responseText);
			// The names of the form fields you want to fill in
			// They must be the same names as the array returned from the PHP script
			var fieldList = new Array('Firstname','Lastname','Email');
			var tempObj;
			
			// Fill in all the fields
			for (count=0;count<fieldList.length;count++) {
				tempObj = eval("document.getElementById('"+fieldList[count]+"')");
				tempObj.value = Data[fieldList[count]];
			}
		}
	};
	xmlhttp.send(null);
}
</script>

<input type="text" name="search" id="search"> <input type="button" value="Search" onclick="getFields()">

<input type="text" name="Firstname" id="Firstname">
<input type="text" name="Lastname" id="Lastname">
<input type="text" name="Email" id="Email">

[NeverMind]

a kick off tut: http://www.phpsimplicity.com/tips.php?id=16

[lordmerlin]

Originally Posted by XTech

This is what I do when I have a lot of fields to fill in.

PHP Code:

  lookup.php
  <?
  // Search for the data
  $search_string = $_GET['search'];
  
  // Make an array of the data you want to output to the javascript
  $details = array(
              'Firstname' => 'Bill',
              'Lastname' => 'Gates',
              'Email' => 'bill@gates.com'
              );
  
  // This converts it from a PHP array to a javascript array
  function phpArrayToJsArray($name,$array,$prePend='var ') {
     if (is_array($array)) {
         $result = $name.' = new Array();'."\n";
         foreach ($array as $key => $value) {
             $result .= phpArrayToJsArray($name.'["'.$key.'"]',str_replace("\r\n",'\n', $value),'');
         }
     } else {
         $result = $name.' = "'.$array.'";'."\n";
     }
     return $prePend.$result;
  }
  
  // Create the javascript array then print it
  $data = phpArrayToJsArray('Data',$details);
  print $data;
  ?>

This is the code you would put on the page you want to search from.

Code:

  <script language="javascript" type="=text/javascript">
  var xmlhttp = false;
          
  // If the user is using Mozilla/Firefox/Safari/etc
  if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
          xmlhttp.overrideMimeType('text/xml');
  } else if (window.ActiveXObject) {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  function getFields() {
  	var search = document.getElementById('search').value;
  	var url = 'lookup.php?search='+search; // Change to suit your script name
  	
  	xmlhttp.open('GET', url, true);
  	
  	xmlhttp.onreadystatechange = function() {
  		if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  			eval(xmlhttp.responseText);
  			// The names of the form fields you want to fill in
 			// They must be the same names as the array returned from the PHP script
 			var fieldList = new Array('Firstname','Lastname','Email');
  			var tempObj;
  			
  			// Fill in all the fields
  			for (count=0;count<fieldList.length;count++) {
 				tempObj = eval("document.getElementById('"+fieldList[count]+"')");
 				tempObj.value = Data[fieldList[count]];
  			}
  		}
  	};
  	xmlhttp.send(null);
  }
  </script>
  
  <input type="text" name="search" id="search"> <input type="button" value="Search" onclick="getFields()">
  
  <input type="text" name="Firstname" id="Firstname">
  <input type="text" name="Lastname" id="Lastname">
  <input type="text" name="Email" id="Email">

This is *not quite* what I'm looking for. I want to do a search of users from a DB.

Put differently, I have a form, which adds relatives to existing users. I want it to query a MySQL DB, fetching the following fields: id, firstname, middlename and lastname; and then pass it to the form, which has a few more fields, which the user / operator needs to fill in, and then submit. The important thing that needs to happen is that the id field needs to be passed to the form as a hidden field, something like:

Code:

  <INPUT TYPE=hidden NAME=id VALUE=<?=$id?>>

Nevermind, the tutorial you suggested is great, but it doesn't do what I'm looking for either. Any other suggestions?

[ben.periton]

This would search a mysqlDB. It just needs to be modified.

PHP Code:

// Search for the data

  $search_string = $_GET['search'];

  

  // Make an array of the data you want to output to the javascript

  $details = array(

              'Firstname' => 'Bill',

              'Lastname' => 'Gates',

              'Email' => 'bill@gates.com'

              ); 

This was just an example of how it uses an array. Instead of that, you would do your mysql query then put the info into an array.

If you replace the line below:

Code:

var url = 'lookup.php?search='+search; // Change to suit your script name

Code:

var url = 'lookup.php?search=<?=$id?>'; // Change to suit your script name

then do your mysql query using $_GET['search'] (which contains the id) in the query, then simply put the results into an array and pass it to phpArrayToJsArray().

This creates the array of data to use in the javascript.

[lordmerlin]

Hi XTech

Thank you for your help. This is unfortunattely not what I'm looking for. With the Google suggest, it drops down a list of options, in a DIV tag, with possible suggestions, as you type. And then when you find something that you want to use, you can either click on it, or select it with the keyboard. I tried to implement their code into my site, but for some odd reason, which I don't know why, it just doesn't work, and it doesn't seem like it's configured for error reporting, thus I don't know what to modify / fix. On it's own, the script works fine, but not with my site (which is on a LAN, and usses sessions)

[ben.periton]

Ah, in that case, check out this tuorial, its the one I used to learn how to do it.
http://www.webreference.com/programm...t/ncz/column2/