CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Wesley
Wesley

Reputation: 317

Search box result with bootstrap

I am setting up a search using bootstrap, and I would like to display the results in an overlay around the search field, however I am not sure how to do it.

I'm using Bootstrap 4, so I don't even know where to start. I wanted to try to do something with just HTML and CSS.

A bit similar to searching for the bootstrap documentation itself.

So I would like to display the overlay around the search box. I don't know how I could make this search result overlay appear over all the content, but just below the search box. And also that it would grow according to the size of the number of results. enter image description here

enter image description here

Upvotes: 0

Views: 4324

Answers (1)

Becky
Becky

Reputation: 5585

Try jQuery UI's autocomplete. Implementing is easy.

    var yourSuggestions = [
        "Suggestion 1",
        "Suggestion 2",
        "Another suggestion"
        //so on...
      ];

    $("#searchWord").autocomplete({
       source: yourSuggestions
    });

Here's a Working example. Play around it and you can see how things work. In this example bootstrap, jQuery and jQuery UI was used.

Upvotes: 2

Related Questions