title: show result dynamically in search box
body: <p>I want  a search box which shows the result just below it when I click the search button without reloading the page.
  for this I've js function called ShowUsers(str)
  like this</p>
  
  <pre><code> function showUser(str) {
   if (str == "") {
      document.getElementById("txtHint").innerHTML = "";
      return;
  } else { 
      if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
      } else {
          // code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) 
         document.getElementById("txtHint").innerHTML =                  
  
     xmlhttp.responseText;
          }
      }
      xmlhttp.open("GET","getuser.php?q="+str,true);
      xmlhttp.send();
  }
  }
  </code></pre>
  
  <p>And a html form like this :</p>
  
  <pre><code> &lt;form&gt;
   &lt;input type="text" name="q"/&gt;
   &lt;script type="text/javascript"&gt;var x = document.getElementById("q").value;     &lt;/script&gt;
   &lt;input type="button" value="search" onclick="showUser(x)"&gt;
   &lt;/form&gt;
   &lt;br&gt;
   &lt;div id="txtHint"&gt;&lt;b&gt;Person info will be listed here...&lt;/b&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I've one php file to show the result called as GetUser.php</p>
  
  <p>I think the var x deos'nt pass to the ShowUser(str) function in the input tag I think this is not a right way to pass a js var into html event
  so what can i do to show the data</p>