7 
<input type="text" list="numbers">

<datalist id="numbers">
    <option value="110">
    <option value="111">
    <option value="112">
    <option value="113">
    <option value="114">
    <option value="115">
</datalist>

http://jsfiddle.net/shvPB/

场景：
1. 用户开始编写任何值选项或向下/向上箭头，下拉列表建议选项。
2. 用户在其中一个选项上单击或输入单击，重要的是：她仍然可以向上/向下滚动列表。
3. 用户在输入字段外点击。输入字段不再是焦点。
4. 用户想要更改她的选择并单击输入字段，但选项不再可见。

如何在步骤 4 中也显示选项？

4

1 回答 1

1

这是一个特殊的解决方案，但应该可以满足您的需求......（使用 jQuery）......：

摘要：制作自己的类似选择的元素，从中复制值<datalist>。然后将 2 个事件绑定到输入：显示/隐藏焦点/模糊。并向每个类似选项的元素添加事件，以将 click() 上的值传递给输入。<datalist>这将是一个保存元素，当没有' 下拉菜单时将可见。有一件棘手的事情 - 消失是由 setTimeout 完成的，因为 focusout(blur) 事件比点击事件更早触发......

到目前为止创建的小提琴：http: //jsfiddle.net/xPx2Z/3/ :) /*chrome look-a-like dropdown */

顺便说一句：您不能<select>打开“true”并且仍然可以focus()输入，因此使用<select>元素的解决方案是不好的。所以我稍微更新了答案:)

于 2013-08-28T10:03:59.240 回答