autocomple searchbox suggestion div style css - css

Question

i create a react search box with this design
using search bar css in react
but it seems like it screw up my old previous auto complete suggestion box for my search
basically the list of suggestion now is on top of my box and is fully horizontal instead
here is my simple code
css side
.suggestion{
cursor: pointer;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.suggestion:hover{
background-color: wheat;
}
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
margin: 20px auto;
/* change the margin to move where it is on the page */
}
react return
<div className="wrap">
<div className="search">
<input type="text"
onChange={e => onChangeHandler(e.target.value)}
className="searchTerm"
value={searchCardName}
onBlur={() => {
setTimeout(() => {
setSuggestions([])
}, 100)
}}
/>
{suggestions && suggestions.map((suggestions, i) =>
<div key={i} className="suggestion" onClick={() => onSuggestHandler(suggestions)}>{suggestions}</div>
)}
{
spinner ? (
<Puff className="searchButton" width="20" height="2em" fill='#ffffff' />
) : (
<button className="searchButton" onClick= {() => handleClick()}>
<FontAwesomeIcon icon={faMagnifyingGlass} />
</button>
)
}
</div>
</div>
i am not sure how to make it become dropdown at the below of my search box as well as maybe align my spinner or something from my button to other places maybe like a modal pop for spinner?

Answer 1

i think i solved the issue here, by just move the suggestion outside of the div with className search.

Answer 2

Try to place this on another div so that it would be independent
<div className="suggestionList">
{suggestions && suggestions.map((suggestions, i)...
...othercode
</div>
now, in your css file. Add styling for suggestionList
.suggestionList {
display: flex;
flex-direction: column;
#adjust the **top** value depending on your preference
#add margins or padding depending on your preference
}