更改HTML5数据表中的输入值

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(模糊)事件比单击事件更早被触发。

到目前为止创建的小提琴：http://jsfiddle.net/xPx2Z/3/ :) /*chrome看上去像一个下拉列表*/

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