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

Question

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

如上图所示，您可以选择可以搜索的类别。我知道可以创建一个带有类别的选择下拉列表的搜索表单，但事情是“选择”下拉列表很难用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向所选li添加一个类，并在提交之前对其进行检索。
2. 如果您使用php提交，我建议您使用hidden字段，并在每次选择发生后使用jQuery更改hidden字段内的值