javascript - テキスト ボックスの下に Div を動的に配置してオプションを表示する

Question

検索機能を配置しようとしている Web ページがあります。検索ボックスと一緒に画像を配置します。ユーザーが画像をクリックすると、コンテンツを含む小さな div を表示したい (「連絡先を検索」などのさまざまなフィルター オプション) 、メールで検索、ゴミ箱などで検索」）検索ボックスのすぐ下にdivを配置したい. この div を HTM マークアップのどこに配置すればよいか知りたいですか? どうすれば div を特定の位置に配置できるのか疑問に思っています。(autosuggest のようなもの)。javascript でこれを処理するにはどうすればよいですか? 私の最終的な目的は、ユーザーが画像をクリックしたときに検索ボックス (テキスト ボックス) の下に Div を表示することです (showSearchOptions 関数)。

<div class="divSearchBar">         

        <div id="searchSelect" style="float:left; width:25px;">             
            <a onclick="showSearchOptions();" href="javascript:;">
                    <img id="searchImg" class="searchMore" border="0" src="Images/searchMore.gif"/>
             </a>               
        </div>
       <div class="searchInputDiv">
            <input type="text" style="border: 1px solid red; padding: 1px 0px 0px 3px;"   value="" name="search" id="search"/>
      </div>
 </div>