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. 我想要像 /profiles/1 这样“漂亮”的 URL。

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

3. 我不喜欢看起来像 /profiles/?user=1 的 URL，尽管它们可以是 /profiles/1。

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

想法？

Answer 1

我想如果您想以成为一个聪明的 SCSS 的名义避免使用 javascript，您可以使用 css :hover 伪类来扩展包含典型 anchor 标记的 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 几乎是处理这类事情的方法。