分层自动建议
我正在快速搜索框上设计自动建议功能。建议将包括小图标、多行文本等。应用程序正在处理订单。搜索字段将识别各种不同的有意义的术语 - 例如客户姓氏、订单 ID 等。但是当输入订单 ID 时，我希望用户有机会查看订单或人员。我想我想要列表中的层次结构 - 因此，如果我输入 1234，并且它匹配 3 个不同人的 5 个订单，则这 3 个人将返回到顶层，而他们的 5 个订单将返回到相应客户的下面。
快速模型：
有没有人在其他地方看到过类似的实现？不想重新发明轮子。也对任何其他反馈感兴趣。
I am designing an autosuggest feature on a quick-search box. Suggestions will include small icons, multiline text, etc. The application is handling orders. The search field will recognize a variety of different meaningful terms - e.g. customer surname, order id, etc. But when an order ID is input, I want users to get an opportunity to view either the order, or the person. I was thinking that I would like a hierarchy within the list - so if i type 1234, and it matches 5 orders for 3 different people, the 3 people are returned at the top level, and their 5 orders underneath the respective customer.
Quick mockup:
Has anyone seen something like this implemented elsewhere? Don't want to re-invent the wheel. Also interested in any other feedback.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
回答您的问题：不，在其他地方没有看到过这个。
对您的模型的反馈：
我想说这是一个非常有创意的自动建议解决方案。
然而，我认为这有点过分了。如果我只想通过搜索特定订单 ID 快速导航到订单页面（并期望自动建议中只有一个结果），但自动建议显示三个人下的五个订单项目（如您的模型中所示），我认为太多了，抛开性能不谈。
我的想法：
每个自动建议项目都包含一个可以清楚识别该项目的主行以及提供有关该项目的更多描述的附加详细信息行 item，类似于Google的搜索结果页面和Facebook的搜索自动提示。
例如，当用户搜索订单时，自动建议会像这样显示每个项目：
您可以将每个订单项目（面包、苏打水等）链接到“订单”页面中相应的订单项目行，并将每个人的姓名链接到相应的人员页面。此方法比模型更简洁，占用的空间更少，同时仍然提供您想要的功能。
有时候，简单更好，少即是多。请记住KISS 原则。以 Apple iPod 和 iPhone 为例。
Answer to your question: No, haven't seen this elsewhere.
Feedback on your mockup:
I would say that it is a pretty creative autosuggest solution.
However, I think it is overkill though. If I just want to quickly navigate to the Order page by searching a specific Order ID (and expecting only one result in the autosuggest), but the autosuggest shows up five order items under three people (as shown in your mockup), I think that is way too much, put aside performance.
My idea:
Each autosuggest item contains one Primary Line that can clearly identify the item and additional Details Line(s) that provide more description about the item, similar to Google's search result page and Facebook search autosuggest.
For example, the autosuggest shows up each item like this when users search for an order:
You can make each order item (Loaf of Bread, Soda, more) link to the respective order item line in the Order page, and each person name to the respective person page. This method is more concise and takes less space than your mockup while still providing the functionality that you want.
Sometimes, simple is better, less is more. Remember the KISS principle. Think of Apple iPod and iPhone as examples.