以下是由 WinningWP 的 Brin Wilson 撰写的客座文章。Brin 联系了我，希望为他的网站做一些广告。我当然会 很乐意接受，但更重要的是，由于 Brin 本身就是一名科技作家，为什么不写一篇客座文章呢？这始终是一个双赢的局面，而且由于他有一个好主意… Brin，请开始吧！
如果您正在阅读这篇文章，我猜您是一位关心用户体验的人。 就像我一样，我敢打赌您可能花了无数个小时试图完善网站的每一个细节：从确保所有内容在各种不同设备上看起来都应该的样子，到创建有趣或有帮助的 404 页面！但是您是否想过，当人们使用您提供的搜索功能（通常是在页面顶部附近的一个简单的搜索框）搜索您的网站，却不小心按下了 Enter 键，而没有真正输入任何内容时会发生什么？
查看整个网络，似乎没有关于这种特定边缘情况应该发生什么的共识。事实上，即使是绝大多数行业领先的网页设计博客似乎也没有就应该发生什么或不应该发生什么达成一致意见！
一些空搜索的示例
重新加载/重定向到主页
常见的例子包括：Web Designer Wall 和 Team Treehouse 博客。
在这些情况下，很可能是 WordPress 主题 1) 使用了默认的 WordPress 搜索，以及 2) 缺少 search.php 模板文件（或者模板与主页基本相同）。因此，默认主页将加载，没有任何搜索过滤器，这意味着没有应用过滤器，您将看到该页面上通常显示的内容。这不太清楚发生了什么。
不做任何事
搜索框什么也不做，或者直接关闭。
没有搜索到任何内容/没有找到任何内容
常见的例子包括这个网站本身，即 CSS-Tricks，以及我自己的网站 WinningWP。
出现了一个默认结果，引用了用户搜索的内容（在这种情况下为空），并且没有显示任何结果。这与第一个例子正好相反，因为没有搜索过滤器，所以所有内容都被找到了。但是您也处于一个明确的搜索页面，所以某些操作已经发生。
没有搜索到任何内容/所有内容都被找到了
常见的例子包括 WebDesignerDepot 和 Code Tuts+。
将显示最近发布的文章列表。
完全空白
常见的例子包括 Smashing Magazine 和 Designmodo。
将显示一个完全空白的搜索结果列表。
故障
常见的例子包括 TheNextWeb 和 1stWebdesigner。
该页面看起来（或显示）已损坏。
更好的结果
那么应该做什么呢？使用属性“required”可以说会在支持此 HTML5 部分的浏览器中大幅提高用户体验。
<input required type="search" name="q" id="q">从而简单地阻止使用更现代浏览器的用户执行空白搜索（如 Speckboy Design Magazine 上的空搜索框行为所示）。这是一个完整的表单示例
<form id="search-form" action="/search-results/">
<div>
<label for="q" id="search-label">
Search
</label>
<input required aria-labelledby="search-label" id="q" type="search" name="q" class="search-field" value="">
<input type="submit" value="Search" class="screen-reader">
</div>
</form>
required，因为它似乎是一个简单/显而易见的改进。但是不支持的浏览器怎么办？这足够好吗？更重要的是：我们可以做得更好吗？
就我个人而言，我认为这些类型的空搜索框搜索可能最好是通过返回一个结果来为用户提供服务，该结果告诉用户他们已经进行了搜索，但不知何故留空了搜索框。可能以一种幽默的 404 页面风格。尽管如此，我说过，我意识到这可能有点过分，对于某些网站来说可能有点不合适。
也许其中一个最好的用户体验（由 Chris 在看到本文的第一稿后提出）可以通过将用户带到一个设计精良的整页搜索体验来提供：可能还会添加一些建议的热门搜索词。
或者也许空白搜索只是一个边缘情况，不必担心，尤其是在流量相对较低的网站上。
当用户留空搜索框时，还有其他建议返回什么？是否有一种可能性是用户只是不小心点击了搜索，或者对搜索功能的运作方式存在其他假设？您的想法呢？
“以下是部分最热门的搜索词:” 应该改为“以下是一些最热门的搜索词:”
“以下是”或更完整的“以下是”指的是单个项目。
不应该...
http://english.stackexchange.com/questions/54682/heres-plurality-question
我认为您应该查看您发布的链接，并一直阅读到最底部，除了最后一个，因为它完全错误。
如果您取句子-
-并将其截断为-
-它的意思是，从字面上来说-
-而这完全错误。
这里有一位前英语老师。原作者是对的。
句子的关键部分：“以下是
部分最热门的搜索词”其中“以下是”是“以下是”的简写，我们有
“以下是词语。”
这是不正确的。
所以没有人注意到 Mnesikles 在他的语法纳粹帖子中打错了字吗？！？没有冒犯的意思，Mnesikles！:) 当我重新阅读这两句话时，有趣的是，这是我注意到的唯一一点！我甚至没有注意到您将
以下是改成了以下是一些！哈哈。你们（Brin 和 Chris）是否对此有任何数据？我通常会以某种方式处理这个问题，但这确实看起来像是只有没有真正搜索意图的人才会尝试的边缘情况。
我认为设置 required 很有道理。但是，例如，可以通过一个简单的脚本气泡进行改进，该气泡会准确地说明为什么搜索无法正常工作，并提供替代方案，例如指向站点地图的链接。（<3 required，但我经常听到人们说它根本不实用/描述性不够）
我不太喜欢提供流行的搜索词。我可能错了，但最流行的 5 个搜索词可能仍然不到大多数网站总搜索量的 5%。这会让添加的文本在页面上只是噪音。
如果只显示网站的随机文章/子页面呢？
（我只是误解了第一个 GIF 的想法。）
我认为这是一个很酷的结果（在我看来），只要用户没有忘记输入搜索词。但是，当他意外地按下回车键时，如果他只是看到一个友好的提醒来输入搜索词，那就更人性化了……
所以也许你真的应该显示这条提示。但是随机文章按钮也不错。;D
我完全可以想象这作为全页搜索体验的一部分。例如，“你没有搜索任何内容，这里有一个大的搜索框，如果你想再试一次，或者你可以看看这篇文章？”
我通常选择全页搜索屏幕，但从未考虑过有意提供随机内容的想法。这似乎是利用空白空间的聪明方法！
不错的帖子，Brin。我喜欢
required技术，至少作为一种简单的渐进增强方式来处理这个问题。顺便说一句，我不是无障碍专家，但我 90% 确定代码示例中的
aria-labeledby属性是多余的。ARIA 旨在模仿现有 HTML 元素的固有无障碍功能。在本例中，元素提供了所有您需要的无障碍功能。始终最好只使用正确的元素，不使用 ARIA。标签和一些非表单用例的字段。aria-labeledby可用于具有多个标签、非-糟糕。格式乱了。（看起来使用内联 HTML 元素，即使用引号括起来，也不起作用。）最后一段应该是
我也看到了。看起来它填补了非标签标签或一对多的利基场景，其中标签用于多个小部件。Mozilla 说它是用于典型的表单元素，但随后给出了一个将其应用于 div 的示例。
https://mdn.org.cn/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute#Notes.C2.A0
如果标签未与输入元素、小部件或组关联，则屏幕阅读器将无法读取它。
相关阅读：“HTML 中的 ARIA – 邻居消失了”
我的直觉（没有数据支持）是，在空搜索字段中按下回车键几乎总是错误，因此一般规则应该是不导航离开当前页面。唯一的例外可能是，如果您有一个专门的“高级搜索”页面，您可能会重定向到该页面。
required属性在支持的浏览器中实现了这一点。但是自定义客户端验证脚本可能更好，因为这样您就可以添加更具意义的弹出消息。如果使用的是非常简约的搜索框（例如当前的 CSS-Tricks 设计），那么这可能特别有用，因为用户可能没有意识到它是一个搜索框。如果您有理由相信人们故意使用空白搜索来获取所有帖子的列表，那么您可以在空白搜索后显示的警告消息中始终添加指向该结果的直接链接。
我之前也做过空搜索。我真的很感谢“无搜索/全部找到”的场景……也许我出于好奇心做了空搜索，看看会显示什么，也许我这样做是为了摆脱当前页面上任何俗气/令人分心的内容。这是一种显示推广或热门内容的好方法。我只是随口一说，我有点喜欢显示以前进行的搜索或浏览的页面（例如，亚马逊提醒我我查看过但尚未添加到购物车中的商品）。
禁用搜索按钮/回车键，使用 JavaScript，这样如果里面没有文本，它就不会尝试搜索，怎么样？
这就是我想的。
我的博客托管在 Blogger（CMS）上，当我将搜索引擎留空时，结果显示所有最新内容。
我认为，当访客输入空搜索时，页面应该什么也不做，因为没有输入任何内容。
required技术对此很好，提供了一些额外的帮助。对于其他浏览器，应该使用 JavaScript 取消提交事件。首页应该提供空搜索的结果。当然，对于高度风格化的首页，这可能有所不同，但这很少见。
我想这取决于您是否将 "" 视为搜索词。（我不认为。）
文章开头假设您“无意中”搜索了空字符串，所以对我来说，您希望提供与您网站上其他表单用户相同的体验。如果您在表单中犯错，您希望获得客户端验证（最好使用
required），这会提醒您错误，而不是重新加载页面。我偶尔会遇到这种情况。我认为自己很精通技术，但还是会发生。怎么会这样呢？
好吧，据我所知，这些网站提供一个搜索功能，该功能由一个搜索框和一个带有“搜索”或类似标签的按钮组成。通常会有一些技巧，隐藏大部分搜索框或使其变小，直到聚焦。因此，我会想，“嘿，那是搜索，让我们去搜索吧”。然后我点击该按钮，希望转到一个页面，在那里我可以执行搜索，但我忽略了第一个搜索框的存在。
我怪罪糟糕的用户体验。
在我看来，只有一种选择。
当您在搜索框中什么也没有输入就按回车键进行搜索时，您就意外地开始搜索。
然后，您显然也不期望搜索结果。
所以，在我看来，如果您没有被要求提供任何东西，就不要提供任何东西！
忽略！
是的，第一个验证必须在 JavaScript 中进行，第二个验证必须在后端（例如 php）进行，然后再发送请求。
我有时会故意进行空搜索，以便在当前页面没有提供足够的有用信息时了解更多信息。当第一次使用新系统时，有时我不知道要搜索什么。以下是我认为最有用的一些建议。
我不想让搜索框变为必填项。那将是死胡同。我宁愿做一些能让用户发现更多信息的事情。如果是宣传网站，我会显示一个展示最受欢迎产品的登陆页面。如果是博客，我会列出最新的条目。对于 Web 应用程序，我会显示一个指向帮助页面、常用搜索词以及与用户角色相关的链接列表的链接目录。对于其他任何内容，如果我知道用户的先前搜索词，而且这不会太像“老大哥”，我不介意显示他们上次执行的搜索的结果。如果所有方法都失败了，随机搜索结果列表可能非常有用，只要所有链接都是用户被允许访问的页面。
您没有输入任何搜索词
所以这里有一只头上戴着煎饼的兔子。
我通常为此创建一个 JavaScript 函数。它涵盖了两种情况
1) 如果用户只是点击按钮（甚至没有聚焦搜索输入），那么我会为他们聚焦它并阻止默认行为
2) 如果用户已经聚焦但执行了空搜索 - 也是一样，只是输入仍然处于聚焦状态
但我认为
required属性或一个特殊的复活节彩蛋搜索结果页面还有空间。感谢您提供这些。在这个网站上，它应该显示这篇文章。
很聪明，我喜欢这样。
结合你关于 404 页面想法和第一个示例。返回所有内容，但添加一条通知，告知用户他们因为没有搜索任何内容而看到了所有内容。
我想知道一些最终用户是否认为在搜索框中不输入任何关键字然后搜索会返回网站上所有可供浏览的内容。
你的链接文本… 选择了幽默的方式。:)
LOL，好吧，这个做得很不错…链接应该说 **Google Play 商店**。
如果可用，显示一个网站索引/标签索引，并附上有关执行的空搜索的评论。站点地图将是第二选择。
我不同意单一用例，因为搜索也可以从过滤的角度来看。假设我们显示所有最新的博客文章，因此所有博客文章按创建顺序排列。如果用户在搜索栏中输入内容，我们可以使用 AJAX 向后端发起请求，并且只显示相关的博客文章，按创建顺序排列。如果用户想要查看更多文章，他们会从搜索栏中删除文本，这实际上等于删除了过滤器。
这种交互仍然允许用户搜索网站，并且它提供了一个明确的信息，说明空文本栏或填充文本栏的功能是什么。
我不是专业人士，但和其他很多人一样，我希望什么都不会发生。
现在，如果搜索不需要重定向并且不会对页面造成太大影响（例如侧边栏中的帖子列表或其他类似内容），那么我期望搜索的行为像过滤器一样，并且会显示所有内容。
我希望看到更多网站使用 JavaScript 模态来处理空搜索。 我在此处制作了一个基本模型。
（没有 Codepen，因为这里没有任何功能。)
我一直很喜欢 Google Play 商店的做法。它只是搜索“独角兽”。
https://play.google.com/store/search?q
这太棒了，我真的很喜欢用一个有趣的 404 页面来处理这种情况。我会说去做吧！你可以用很多非常有趣的方式来表达它。比如，“好吧，这真让人尴尬。”我不确定你的位置，但使用附近的俚语会很有趣。Wicked 绝对是新英格兰地区的东西。
我认为搜索框文本应该在用户开始在框中输入时消失。看到那些需要删除“在此搜索”文本然后才能输入搜索查询的搜索框真的很烦人。
在我看来，最好的方法是不进行搜索，而是像支持 HTML5 的浏览器那样在搜索框下方显示一条简短的提示信息。一点 JavaScript 和 CSS 就够了。
我更喜欢“未找到任何内容，请重试”的方法，我发现有些人会点击图标，等待搜索表单出现。另外，我认为这是引导用户了解我们网站的一种自然而流畅的方式。错误/警告信息会让用户感觉很笨，我尽量避免使用它们。
我更喜欢让空白搜索或星号（*）返回所有帖子/内容。