如何制作 <input> 下拉菜单？

你好。我正在使用Bootstrap-4并且有一个任务是制作一个下拉列表。

后台实现了搜索，前端自动补全，但是由于CSS知识太少，无法实现下拉列表。

在这个阶段，导航栏内只有一个简单的表单：

  <div class="m-b-1">
    <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
      <form class="form-inline my-2 my-lg-0">
        <div class="form-group">
          <input type="text" class="form-control mr-sm-2" placeholder="Search" v-model="q" @input="typeInput">
          <search-item 
            v-for="item in search" 
            :item="item" 
            :key="item.id">  
           </search-item>
        </div>
        <button class="btn btn-outline-secondary my-2">Submit</button>
      </form>
     </nav>
    </div>

和原始元素模板：

  <script type="text/x-template" id="search-item">
    <ul class="form-group row">
      <a :href="item.link" class="form-control-static"><li>
        #{ item.title }
      </li></a>
    </ul>
  </script>

提前致谢。

PS 我保证我会记住 CSS3 :)