25

有些人可能已经知道样式选择元素是一场噩梦，如果没有一些 javascript 技巧，实际上是不可能的。HTML5 中的新数据列表可以起到相同的作用，因为用户会看到一个选项列表，并且值记录在输入文本字段中。

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

所以我有这个代码 -在 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);

任何帮助，将不胜感激，

干杯

4

4 回答 4

10

我使用以下代码：

<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>

鼠标悬停：
设置焦点并记住一个--全局--变量中的旧值

mousedown：
删除值并显示datalist（内置功能）

mouseup：
恢复旧值

然后选择新值。

发现这是针对组合框的可接受的解决方法。

于 2013-12-17T23:15:39.337 回答
7

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

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

在 mouseout 时，它将从变量 temp 中恢复字段的值。这个解决方案在我测试过的 Chromium 下效果很好。

作为奖励，您可以添加一个placeholder="Click to see all your options"

<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>

于 2017-10-25T12:48:22.060 回答
-2

问题很老了，但它是谷歌上的热门搜索，没有找到答案，所以我会在这里添加。

要在第一次单击时展开数据列表，您需要设置

dataListElement.style.display = "block";

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

dataListElement.style.display = "none";

截至今天，它仅在 Firefox 中没有在首次点击时展开。

于 2020-02-14T13:06:06.290 回答
-3

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 箱

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

于 2013-03-26T20:36:47.837 回答