Javascript 如何在搜索输入下放置项目列表

我想在我的html页面中创建自定义搜索输入

html代码：

<input type="text" class="form-control"/>
      <ul class="list-group">
          <li class="list-group-item" ng-repeat="item in list track by $index">{{item}}</li>
      </ul>  

{{item}

我希望列表始终关闭，但仅当用户单击输入或更改其值时才打开。我希望元素固定在输入下面，如下所示：

但不移动页面上的任何其他元素。
我不想添加任何库，但我自己做

---

我如何通过css来实现它？

这就是您要搜索的内容吗

.list组{
背景色：白色；
显示：无；
列表样式类型：无；
利润率：0.10px；
填充：0；
位置：绝对位置；
宽度：150px；
}
.列表组>li{
边框颜色：灰色；
边界图像：无；
边框样式：实心-实心-无；
边框宽度：1px1p0；
左侧填充：5px；
}
.list group>li:最后一个子项{
边框底部：1px纯色灰色；
}
.form控件：焦点+.list组{
显示：块；
}

a）
b）
c）
d）

Lorem ipsum dolor sit amet，consetetur sadipscing Eliter，sed diam nonumy eirmod tempor invidunt ut l

您忘记了javascript代码人，将其粘贴到此处JS代码为空。我想知道在那里写什么，或者没有代码怎么写。你在发布这个问题之前做了适当的研究吗？我试过了，但没有找到具体的答案。你想做的就是：我认为一个

ul

必须向右移动大约5-10px，我们得到了Ariela梦寐以求的外观。@Banzay谢谢。我更正了。@Patrick请看我的编辑，希望我的问题现在更清楚。@Ariela我添加了更多的代码。如果您想这样做，您需要js将写下的单词放在列表中。@Patrick当列表打开时，所有其他元素向下移动，您的解决方案工作正常但并不完美。我想让它们呆在原地，然后在上面漂浮。