title: Autocomplate like facebook - list always appear
body: <p>I download example of autocomplate search list</p>
  
  <blockquote>
    <p>The Problem is the list of people always appear even i
    click outside of list area, i must delete the data from input field to disappear. </p>
    
    <p>What i want when i click any where this list hide or disappear when i
    click or enter any data appear again inside input field .</p>
  </blockquote>
  
  <p>About source code </p>
  
  <ul>
  <li><strong>index.php</strong> </li>
  <li><strong>js.js (java)</strong> </li>
  <li><strong>db.php (Database)</strong></li>
  </ul>
  
  <hr>
  
  <p><strong>index code is :</strong>
      
      
      </p>
  
  <pre><code>&lt;body bgcolor="#F1f1f1"&gt;
  &lt;div id='val'&gt;
    &lt;div&gt;
      &lt;form&gt;
        &lt;input type="text" id ="test"  name="n" onblur="message()" onclick="showHint(this.value)"   onkeyup="showHint(this.value)" placeholder="Search here"   autocomplete="off"  autocorrect="off" autocapitalize="off" /&gt;
        &lt;img src="Black_Search.png" class="search" width="20" height="20"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id='val2'&gt;
    &lt;div id="result"&gt;&lt;/div&gt;
    &lt;div id='more'&gt; &lt;a href='#' class='search_profile'&gt;see more result&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>java js.js Code is:</strong> </p>
  
  <pre><code>function showHint(str)
  {
  if (str.length==0)
    { 
  
    document.getElementById("result").innerHTML="";
    document.getElementById("val2").style.display = "none";
  
    return;
    }
  
  
  
  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("result").innerHTML=xmlhttp.responseText;
      document.getElementById("val2").style.display="block"; 
      }
  
    }
  xmlhttp.open("GET","db.php?n="+str,true);
  xmlhttp.send();
  }
  </code></pre>
  
  <p><strong>Database db.php code :</strong> </p>
  
  <pre><code>if(@mysql_real_escape_string(strip_tags($_GET['n']))){
  $_dblocal='localhost';
  $_dbrott='root';
  $_dbpassword='';
  $_dbname='search';
  @mysql_connect($_dblocal,$_dbrott,$_dbpassword)  or die (mysql_error());
  @mysql_select_db($_dbname) or die (mysql_error());
  $sele="SELECT * FROM `users` WHERE name LIKE '" .$_GET['n']. "%' ORDER BY id DESC  LIMIT 5";
  
  $que=@mysql_query($sele);
  while($rows=mysql_fetch_assoc($que)){
  
  $id= $rows['id'];
  $name= $rows['name'];
  $images = $rows['image'];
  $desc= $rows['desc'];
  
  echo "&lt;a href='profile.php?id=$id' class='search_profile' &gt; 
  &lt;div class='comment'&gt;
   &lt;img src='images/$images' width='40' height='40' align='top' class='Square' &gt;
  &lt;b&gt;$name&lt;/b&gt;
  &lt;div class='dec'&gt;$desc&lt;/div&gt; 
  
  
  &lt;/div&gt; &lt;/a&gt;";
  
  }
  
  }else{
  echo "Enter Name";  
  }   
  </code></pre>