i create a react search box with this design

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?

CodePudding user response：

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

CodePudding user response：

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
}