Question

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

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

所以我有这段代码 - view on jsbin

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
  <input list="categories">
  <datalist id="categories">
    <option value="Breakfast">Breakfast</option>
    <option value="Brunch">Brunch</option>
    <option value="Lunch">Lunch</option>
    <option value="Dinner">Dinner</option>
    <option value="Desserts">Desserts</option>
  </datalist>
</body>
</html>

我正试图通过这个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

我使用以下代码：

<input name="anrede" 
    list="anrede" value="Herr" 
    onmouseover="focus();old = value;" 
    onmousedown = "value = '';" 
    onmouseup="value = old;"/>

<datalist id="anrede">
    <option value="Herr" selected></option>
    <option value="Frau"></option>
    <option value="Fraulein"></option>
</datalist>

<强>鼠标悬停：
设置焦点并记住旧值 - 变量l - 变量

<强>鼠标按下
删除值并显示datalist（内置功能）

<强>鼠标松开：
恢复旧值

然后选择新值。

找到一个可接受的针对组合框的解决方法。

Answer 2

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

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

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

<input value="Classic" list="myDatalist" temp="" onmouseover="this.temp=this.value; this.value='';" onmouseout="this.value=this.temp;"> 
  <datalist id="myDatalist" open="open"> 
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

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

Answer 3

问题已经很老了，但是它是google上的热门搜索，找不到答案，因此我将其添加到这里。

要在首次点击时展开数据列表，您需要设置

dataListElement.style.display = "block";

并立即将其隐藏在下一行中，因此它不会在DOM中显示为元素，而只会在输入元素下展开它。

dataListElement.style.display = "none";

截止到今天，仅在Firefox中，仅在单击时才展开该功能。

Answer 4

HTML：

<!DOCTYPE html>
<html>
<head>
   <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

   <meta charset=utf-8 />
   <title>Input - Datalist</title>
</head>
<body>

  <input list="categories" id="categories2" type="text">
  <div id="result"></div>
  <datalist id="categories">
     <option value="Breakfast">Breakfast</option>
     <option value="Brunch">Brunch</option>
     <option value="Lunch">Lunch</option>
     <option value="Dinner">Dinner</option>
     <option value="Desserts">Desserts</option>
  </datalist>
</body>
</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

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

4 个答案: