更改HTML5 datalist中的输入值

Question

<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中显示选项？

Answer 1

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

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

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

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