当焦点事件在输入上触发时，使HTML5 datalist可见

有些人可能已经知道造型选择元素是一场噩梦，如果没有一些javascript技巧，几乎是不可能的。 HTML5中的新数据列表可以用于相同的目的，因为向用户显示选项列表，并且值记录在输入文本字段中。

这里的限制是列表在用户开始在文本字段中输入内容之前不会出现，即使这样，也只会根据输入显示可能的匹配。 我想要的行为是，只要对该字段有焦点，整个选项列表就会变得可见。

所以我有这个代码 – 在jsbin上查看

         Breakfast Brunch Lunch Dinner Desserts    

而我正试着通过这个Javascript来展示：

  var catVal = document.getElementsByTagName("input")[0], cat = document.getElementById("categories"); catVal.style.fontSize = "1.3em"; catVal.addEventListener("focus", function(event){ cat.style.display = "block"; }, false); 

任何帮助，将不胜感激，

干杯

Answer 1

我使用以下代码：

鼠标移到：
设置焦点并记住 – global – 变量中的旧值

鼠标按下：
删除值并显示datalist （内置function）

鼠标松开：
恢复旧值

然后选择新值。

找到这个朝向combobox的可接受的解决方法。

Answer 2

我希望你喜欢这个解决方案：

我在输入字段中添加了一个“temp”属性进行存储，一旦鼠标hover在输入字段上，它就会将当前值保存在temp中，然后删除该值以便允许数据列表打开。

在mouseout上，它将从变量temp恢复字段的值。 这个解决方案在我测试的Chromium下工作得很好。

作为奖励，您可以添加…占位符=“点击查看所有选项”

Answer 3

HTML：

jQuery的：

 var result=''; $(document).ready(function(){ $('input[type=text]').focus(function(){ $('#categories option').each(function(){ result=result+" "+$(this).val(); }); $('#result').show().html(result); $('input[type=text]').unbind('focus'); }); $('input[type=text]').blur(function(){ $('#result').hide(); $('input[type=text]').focus(function(){ $('#result').show(); }); }); }); 

工作JS bin

http://jsbin.com/urupit/4/watch