问题描述
我正在使用数据列表和输入执行简单的自动完成。 问题在于数据列表显示的区域距离输入区域较远。 我正在将Tailwind与React一起用于该项目。
<div>
<input
type="text"
name="search"
placeholder="Search for products,brands"
className="w-full p-4 text-sm rounded-lg bg-transparent border-solid border-2 border-black bg-white"
onChange={(e) => setSearchTerm(e.target.value)}
list="categories"
/>
<datalist id="categories">
{categories.map((category) => (
<option value={category.name} />
))}
</datalist>
</div>
解决方法
更新,我在登录Firefox后发现它是Chrome中的错误。
这是解决问题的方法 fixing datalist problem with Chrome