title: How to align the suggestion list based on textbox box position
body: <p>I have div in that there is a textbox.before textbox, there is some text.</p>
  
  <p>on keyup of the textbox, list suggestions are popping up. What I want is this suggestion list should be based on the position of the textbox. like if the text is extreme right then the list should pop up just below that textbox not the way its currently popping up.</p>
  
  <p>Here is code snippet of it
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getval()
  {
  
    textval = document.getElementById("srval").value;
    if(textval.length&gt;0)
    {
        document.getElementById("list").style.display="block";
    }
    else
    {
          document.getElementById("list").style.display="none";     
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;This is a Heading&lt;/h1&gt;
  &lt;p&gt;This is a paragraph.&lt;/p&gt;
  &lt;div style="border:1px red solid;width:250px;height:20px"&gt;
   Coffeee Teat MIlk
     &lt;input type="text" id="srval" onkeyup="getval()" style="position:absolute"&gt;
      &lt;ul style="display:none;position:relative;top:5px" id="list"&gt;
      &lt;li&gt;Coffee&lt;/li&gt;
      &lt;li&gt;Tea&lt;/li&gt;
      &lt;li&gt;Milk&lt;/li&gt;
   &lt;/ul&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>