jQuery自动完成UI

Question

我有一个模型层次结构，如下所示：

Office
   |
   +-- Person

也就是说，每个Office都有多个Person。

我想允许用户使用自动填充文本输入字段（使用jQuery UI Autocomplete）选择Person。在此文本输入字段中，我允许用户键入文本，该文本与服务器端匹配，使用Person的姓氏，名字和登录名来查找匹配，以便在他/她是打字。

最近我遇到了问题，有时用户只知道有限的信息，例如Office名称和Person的名字。他们不能简单地在自动填充字段中键入“John”，因为它将匹配数百个“John”，并且他们必须滚动浏览所有这些，搜索右侧Office中的那个。

我的问题是，允许用户使用Person和Office条件搜索Person的最佳方式是什么？

我更希望尽可能保持用户界面尽可能简洁，所以我试图远离多个字段，重叠查找弹出窗口以及那种性质的东西。

Answer 1

结帐http://jquery.bassistance.de/autocomplete/demo/，然后点击

“点击此处查看厚箱窗口内的自动填充功能。”

关于他们的插件的演示。这实现了复合自动完成，您可以使用Person作为主记录，办公室作为底部的较小信息。可能需要一些调整才能使其与您想要的方式相匹配，这样空间就会开始一个新的表达式。

示例：

目前john west与

不匹配

John Smith
Office: West Park

但是按空格分隔新表达式会同时匹配名称和办公室。

但是，您可以通过输入 John 或 west

来匹配该条目

Answer 2

我首先给他们一个可选的下拉列表以选择Office，然后使用Office中的每个人填充自动完成。然后，您可以包含允许他们首先选择Person的功能，并且还可以填充Office。

Answer 3

也许给他们一种方法来标记搜索字符串的Office部分？就像@office一样，用户可以键入john @scranton或john smith @scranton。