How to design in css an auto suggest search with dropdown scroll

Question

I would like to design an auto suggest search input box. Using bootstrap and some css of course. My data is from javascript array. I can do that part but the design, I need your guidance on this.

I would like to create this one. https://drive.google.com/file/d/1Yf8nalyt2Pfwcfre62FpGM14zE7JO2E7/view?usp=sharing

You will need to attempt it first, and ask a specific question about your code if you get stuck. — Adam Buchanan Smith, Jun 05 '19 at 17:04
Possible duplicate of [create dropdown list with scrollbar](https://stackoverflow.com/questions/39460694/create-dropdown-list-with-scrollbar) — Mravec, Jun 05 '19 at 17:05
Have a look at https://www.w3schools.com/howto/howto_js_autocomplete.asp — ximewatch, Jun 05 '19 at 17:05

score 0 · Answer 1 · answered Jun 05 '19 at 17:09

People in these two threads figured it out:
How can I limit the visible options in an HTML <select> dropdown?
create dropdown list with scrollbar

<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;">
  <option value="1">This is select number 1</option>
  <option value="2">This is select number 2</option>
  <option value="3">This is select number 3</option>
  <option value="4">This is select number 4</option>
  <option value="5">This is select number 5</option>
  <option value="6">This is select number 6</option>
  <option value="7">This is select number 7</option>
  <option value="8">This is select number 8</option>
  <option value="9">This is select number 9</option>
  <option value="10">This is select number 10</option>
  <option value="11">This is select number 11</option>
  <option value="12">This is select number 12</option>
</select>

How to design in css an auto suggest search with dropdown scroll

1 Answers1