在现代企业级Web应用程序中，经常需要对数据进行高级搜索或过滤。传统的方法是提供一个包含多个字段、操作符和值的表单。随着用户体验的不断优化，这种功能现在通常以更动态的方式呈现，并且被称为“过滤器”而不是“高级搜索”。这种新的用户体验模式虽然需要更多的点击来构建查询，但它占用的空间更少，不需要用户导航到不同的页面，并且更加强大，因为它允许在同一字段上组合多个条件。
为了实现这种功能，可以使用一个名为Structured-Filter的jQuery UI插件。这个插件允许用户通过一个直观的界面构建结构化查询，例如：“联系人，其中名字以'A'开头，生日在1980年1月1日之后，且状态在(CA, NY, FL)中”。Structured-Filter是一个完整的jQuery UI组件，支持各种配置和主题。
Structured-Filter的配置是通过一个字段列表来完成的，每个字段必须有一个ID、一个类型和一个标签。字段的类型决定了可能的操作符。例如，布尔字段可以使用"Yes"和"No"操作符，日期字段可以使用"on"、"not on"、"after"、"before"等操作符。
要使用Structured-Filter，首先需要加载jQuery、jQuery-UI和插件代码。然后，需要为jQuery UI提供一个主题，以及插件自己的基础CSS文件。接下来，将插件附加到一个现有的DIV标签上。
<script type="text/javascript">
$(document).ready(function() {
$("#myFilter").structFilter({
fields: [
{type: "text", id: "lastname", label: "Lastname"},
{type: "text", id: "firstname", label: "Firstname"},
{type: "boolean", id: "active", label: "Is active"},
{type: "number", id: "age", label: "Age"},
{type: "date", id: "bday", label: "Birthday"},
{type: "list", id: "category", label: "Category",
list: [
{id: '1', label: "Family"},
{id: '2', label: "Friends"},
{id: '3', label: "Business"},
{id: '4', label: "Acquaintances"},
{id: '5', label: "Other"}
]
}
]
});
});
</script>
<div style="width:100px;" id="myFilter"></div>
Structured-Filter提供了多种选项来自定义其行为，例如按钮标签、日期格式、字段列表、高亮显示、提交按钮等。此外，它还提供了一些方法，如addCondition、clear、length、removeCondition、val、valText和valUrl，用于添加新条件、清除所有搜索过滤器、获取过滤器数量、移除指定索引的条件、获取或设置过滤器定义等。
Structured-Filter还支持事件，如change.search和submit.search，分别在搜索条件列表被修改和提交按钮被点击时触发。