更新屏幕查询的搜索选项

Question

我目前正在为我的网站创建一个搜索字段，它有多个选项，我正在努力的主要功能是，当用户开始选择要搜索的数据时，回显他们想要执行的搜索查询。

这是我想要实现的目标的图像。

http://i4.minus.com/jbluKDVCTV1HKh.png

因此，当用户开始从列表中选择选项时，它会在右下角更新用户要搜索的内容。某些类别必须允许多个选择，例如，用户可能希望通过Make C搜索蓝色中的类型D和A.

到目前为止我所做的是搜索查询分为三个部分（数据将被输入的位置），每次用户点击一个选项时，它首先查看是否有一个带有该值的标记选择的选项，但它不能很好地扩展。

你会如何解决这样的问题？此刻我的方式感觉有点笨拙。

欢迎提出任何问题，因为我希望找到一个很好的方法来实现这一目标并继续前进！谢谢！

Answer 1

以下是我认为您要实现的jsfiddle工作示例：http://jsfiddle.net/b446B/

我创造了3种不同的案例： - 需要的类，用于需要在最终查询中的字段 - 多个类，用于允许多个选择的字段 - 没有上述内容，需要进行单一选择

标签可以与字段不同，这就是我将它们存储在rel属性中的原因。