HTML5 从表单选择创建 URL

Question

我有一个用户管理网站，我想拥有“更好”的 URL。本质上，客户端将看到一个用户列表，他们选择一个，然后他们可以查看该用户的页面。所以我有两个选择：

1. 我可以向用户显示这样的 URL 文字列表并让它滚动：

   <ul style="height:300px;overflow:auto">
   <li><a href="/profiles/1">User 1</a></li>
   <li><a href="/profiles/2">User 2</a></li>
   </ul>
   

2. 我可以向用户展示一个稍微更友好的表单/选择，如下所示：

   <form action="/profiles/" method="GET">
   <select name="user">
   <option value="1">User 1</option>
   <option value="2">User 2</option>
   </select>
   <input type="submit">
   </form>
   

我对两者都有好恶，我真正想要的是两全其美：

1. 我想要“漂亮”的 URL，例如 /profiles/1。

2. 我想让 UI 像一个简单的下拉菜单，用户只需键入项目的前几个字符，它就会跳转到它。 （最后一部分有点大，有1000个用户）。它不必完全是这样，但在可用性方面是相当的。

3. 我不喜欢看起来像 /profiles/?user=1 的 URL，但实际上它们可能是 /profiles/1。

到目前为止，我能想到的最好的办法就是让/profiles/?user=1 无缝重定向到/profiles/1。所以用户体验很流畅，但我很好奇是否有人可以做得更好:-)。

想法？

Answer 1

我想如果您想以聪明的混蛋的名义避免使用 javascript，您可以使用 css :hover 伪类来扩展包含典型锚标记的 div。比如：

.dropdown_parent {
    height:1.25em;
    width:100px;
    display: inline_block;
    position:relative;
}
.dropdown {
    max-height:1.25em;
    overflow:hidden;
    line-height:1.25em;
    border: 1px solid black;
    background: white;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
}
.dropdown:hover {
    max-height:10em;
    overflow:auto;
}

HTML：

<div class="dropdown_parent>
    <div class="dropdown">
        <a>link</a>
        <a>link</a>
        <a>link</a>
    </div>
</div>

请注意，我根本没有对此进行测试。

更严重的是，javascript 几乎是处理这类事情的最佳方式。

Answer 2

我认为对于您的选项 2（通过表单生成 URL），您可以尝试以下操作：

<form id="urlForm" onsubmit="this.action = '/profiles/' + this.user.options[this.user.selectedIndex].value;" method="GET">
<select id="user">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
</select>
<input type="submit" />
</form>

但是浏览器可能默认不允许运行这种类型的脚本，如果脚本被关闭或不可用，它当然根本无法工作。 在我的测试中，这在 Chrome 中有效，在 Firefox 中失败，并且 IE 提示我接受正在运行的脚本。

如果有一个新的 HTML5 输出属性会很有用，这样你就可以计算表单/@action 的内容，但我想这会带来各种各样的安全问题。