Hello.
I use Bootstrap-4 and there is a task to make from the drop-down list.

Implemented search on the backend and autocomplete on the frontend, but due to very poor knowledge of CSS, it is impossible to implement the drop-down list.

At this stage, there is only a simple form inside the navbar:

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

and primitive element template:

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

Thanks in advance.

P.S. I promise I’ll memorize the CSS3 🙂

Answer 1, authority 100%

I did it like this:

& lt; div class = "btn-group" & gt;
    & lt; input class = "form-control mr-sm-2" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false" & gt;
     & lt; div class = "dropdown-menu" & gt;
   & lt; a href = "" class = "btn dropdown-item" & gt;
   & lt; / a & gt;
     & lt; / div & gt;
   & lt; / div & gt;

With JS, here & lt; div class = "btn-group" & gt; add show when elements appear and aria-expanded needs to be changed to true . And, accordingly, vice versa.