将下拉菜单放置在文本框或文本区域内

Question

我试图将下拉菜单放在使用HTML创建的文本框中，但是我不知道该如何进行编码。

我找到了一种将图像放置在文本区域内的方法，但下拉菜单却没有。

$('input:text').css('background','#fff url(images/back.png) center right no-repeat');

我的想法是在搜索框中放置一个下拉菜单，以便用户可以选择要搜索的类别。 例如：音乐，视频，图片。 但选择下拉菜单应位于搜索框中。

我的下拉菜单代码是

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>                </ul>
      </li>

对我要做什么有什么建议吗？

Answer 1

您可以尝试使用z-index和绝对定位覆盖下拉列表。 通过CSS指定绝对位置和下拉菜单的z-index。

Answer 2

扩展@TGH的答案：

CSS：

#dropdown
{
    position: absolute;
    z-index: 9999;
    top: 50px;
    left: 50px;
    border: 1px solid red;
}
body textarea
{
    width: 500px;
    height: 200px;
    border: 1px solid red;
}

HTML：

<select id="dropdown">
    <option value="1">1</option>
</select>
<textarea></textarea>

JS小提琴