你如何创建像 pinterest 这样的搜索栏？

Question

https://kimvij.files.wordpress.com/2014/09/new-interest-icons-plus-featured.png

如您在上图中所见，您可以 select 可以在其中搜索的类别。我知道可以创建一个带有 select 下拉菜单的搜索表单，其中包含类别，但问题是 "select" 下拉菜单很难用 css 设置样式，我想用类似的方式制作我自己的自定义按钮作为 pinterest 的下拉菜单。

我能想到的唯一其他方法是使用 "ul li" 获取值并设置下拉菜单的样式。我的问题是，如果我在表单中使用 "ul li" ，我仍然能够获得它的输入值吗？例如

<form action="" method="post">
 <input type="text" name="search">
 <ul id="dropdown">
  <li id="category-1"></li>
  <li id="category-2"></li>
  <li id="category-3"></li>
 </ul>
</form>

如果不是，最好的方法是什么？

Answer 1

我认为您无法从表单中获取 li 值。你可以通过两种方式做到这一点。 您可以使用自定义样式设计自己的菜单。

---

1. 如果您要通过 ajax 执行此操作，则使用 jQuery 将 class 添加到所选 li 并在提交前检索相同内容。
2. 如果您使用 php 提交那么我建议您使用 hidden 字段并在每次选择后使用 jQuery 更改 hidden 字段内的值发生