title: Dynamically update datalist via Ajax
body: <p>I need to update a html 5 datalist via ajax.<br>
  Html code is here.   </p>
  
  <pre><code>&lt;body&gt;
    &lt;input type="text" id="bar" list="fruit" onkeyup="jsfun()" /&gt;
     &lt;datalist id="fruit"&gt;&lt;/datalist&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>A pseudo code of JavaScript.  </p>
  
  <pre><code>function jsfun(){
      //1- Get the last word from input field ("bar").
      var skw1 = document.getElementById("searchBar").value;
      var skw2 = skw1.split(" ");
      var skw = skw2[skw2.length-1];
     //2- Use Ajax to send data on server and get data result back
     /* 
     * here goes other javascript content for ajax
      */
      xmlhttp.open("GET","searchopt.php?skw="+skw,true);
              xmlhttp.send();
     //3- use javascript to update the datalist with those result which Ajax get.
  }
  </code></pre>
  
  <p>see the below url here first write <strong>mang</strong> then remove it and write <strong>bann</strong><br>
  it give a suggestion<br>
  then remove it and know write <strong>mango bann</strong> this time it can not give any suggestion.why but the suggestion is prensent in database.it give suggestion only for first word.<br>
  <a href="http://iws.uphero.com/qwe.html" rel="nofollow">http://iws.uphero.com/qwe.html</a></p>