title: Set position of div dynamically
body: <p>I have to create a search result box. Whenever a user type something in the search text box the list of result will be populated in the search result box just underneath the textbox. I am able to do this where there is only one instance of the search box(the caller is a single textbox). The problem occurs when the same searchbox is used for multiple text boxes. I want it to adjust its position according to the caller textbox. Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
          .searchDiv {
              border: 1px solid red;
              width:150px;
              height:100px;
              visibility: hidden;
          }
      &lt;/style&gt;
      &lt;script&gt;
          showSearchBox = function (_element) {
              var _div = document.getElementById('divSearch');
              _div.style.visibility = 'visible';
          }
          hideSearchBox = function () {           
              var _div = document.getElementById('divSearch');
              _div.style.visibility = 'hidden';
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table border="0" style="width: 50%"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td style="width: 50%"&gt;
                      &lt;input type="text" id="txtFirstName" name="txtFirstName" onfocus="showSearchBox(this)" onblur="hideSearchBox()" /&gt;
                  &lt;/td&gt;
                  &lt;td style="width: 50%"&gt;
                      &lt;input type="text" id="txtLastName" name="txtLastName" onfocus="showSearchBox(this)" onblur="hideSearchBox()"/&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;&lt;tr&gt;
                  &lt;td colspan="2" style="width: 100%"&gt;
                      This is just a placeholder text.
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" style="width: 100%"&gt;
                      &lt;div id="divSearch" class="searchDiv"&gt;&lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What changes do I need to make in my code? You can also check out the <a href="http://jsfiddle.net/rms2L438/" rel="nofollow">jsfiddle</a></p>