Блог

В настоящее время я работаю над компонентом react, который фильтрует некоторые данные, и основное назначение компонента заключается в том, что при вводе пользователем он фильтрует данные и выводит данные на выбор пользователя. Вывод данных также доступен для кликабельности. Прямо сейчас мои варианты перечислены следующим образом:

рисунок 1

Тем не менее, я хотел бы, чтобы это было представлено в более раскрывающемся списке, а не просто перечислять их. Например, например, страница результатов поиска googles:

рисунок 2

Вот моя часть кода, которая отображает параметры. Часть этикетки-это то, что представляет мои варианты, но было бы неплохо использовать более раскрывающийся список, который был бы внизу или прикреплен к строке поиска. любой совет был бы полезен. Огромное спасибо!

  return (
    <Fragment>
    <input type="text" placeholder="Enter Brewery Name" style={{ width: "40%", marginTop: "10px"}}
    className="search-box" onChange ={(debounce((e) => searchBreweries(e.target.value)))} />
        {searchBrews amp;amp; searchBrews.map((brew) => {
        return (
            <ul>
                <label class="search" name="state" onClick={() => history.push({
                    pathname: '/BrewDetails', 
                    currentbrew: brew})}>
                        <option value="AL">{brew.name}</option>
                    </label>
                    
            </ul>
        )
    })
}
    </Fragment>

);
 

}