【问题标题】:multiple selections with datalist使用 datalist 进行多项选择
【发布时间】:2013-01-03 22:49:36
【问题描述】:

我正在使用标签为我的搜索框创建建议列表,但我无法从数据列表中选择多个值。目前,我的 HTML 是:

<html>

  <form action="search_tags.php" method="GET"/>

  Search: <input type="text" multiple="multiple" name="search" list="tags" autocomplete="off" />

  <datalist id="tags">
    <option value="black">
    <option value="gold">
    <option value="grey">
    <option value="pink">
    <option value="turquoise">
    <option value="red">
    <option value="white">
  </datalist>

</html>

它会为一个项目提供建议,但之后建议不会为我的第二个选项建议自动完成。我认为“多个”标签是我所需要的(以及在线建议的),但它似乎没有达到预期的效果。

有什么建议吗?

【问题讨论】:

  • 根据 MDN,multiple 只适用于“email”和“file”类型。我认为您对传统文本字段不走运,可能不得不使用 select2.js 之类的东西
  • 很不幸 :( 有没有不使用 jquery 的 javascript 包可以做到这一点?
  • 它们中的大多数都依赖于库,因为其中涉及大量的 DOM 操作。有 select2 (jQuery)、选择 (jQuery 或 Prototype)、jQuery UI 自动完成 (jQuery)。我认为在那之后你会得到不太可靠的解决方案。为什么不能使用 jQuery?
  • 现在有什么新的选择可以完成同样的事情吗?

标签: html html-datalist


【解决方案1】:

Multiple 当前仅适用于 input type="email" 且仅在 Chrome 和 Opera 中

看看这个极简主义的例子:

input{width:500px}
<input type="email" list="emails" multiple>
<datalist id="emails">
    <option value="first@example.com">
    <option value="second@example.com">
    <option value="third@example.com">
    <option value="last@example.com">
</datalist>

<br><br><br>

<input type="text" list="texts" multiple>
<datalist id="texts">
    <option value="black">
    <option value="gold">
    <option value="grey">
    <option value="pink">
    <option value="turquoise">
    <option value="red">
    <option value="white">
</datalist>

第一个输入有效,第二个无效。

您只需按逗号,列表将与单击输入时显示的相同。

【讨论】:

  • 有人知道为什么只支持type="email" atm 吗?太奇怪了!
  • @NickGrealy 也许是因为the standard 显示此属性在电子邮件(地址字段和附件)的上下文中如何工作,并且浏览器供应商不愿超越标准中明确给出。
  • @bishop - 哇,我真的希望这不是原因……因为那太可悲了。 w3给出了“一个例子”,每个人都故意忽略了这个意图,并实现了最低限度(勾选“支持/兼容”框?)。我错过了什么吗?
  • 我想就是这样,@NickGrealy:在规范中,最好只实现指定的内容,而不管意图是什么显而易见的。实现任何隐含的东西都是冒着与未来需求发生冲突的风险,最坏的情况是把自己画在一个角落里,或者最好的情况是取消工作。
【解决方案2】:

超简单的jQuery工具:Flexdatalist

我想要一些更简单的东西,但据我了解,“multiple”属性仅适用于电子邮件和文件,因为 HTML5 开发人员不想打开一罐蠕虫,而是 devs are considering a change。在搜索完所有内容后,我可以让这个工作的唯一方法是在列表中获得那些花哨、有用的“#tagHere X”项目,就像在许多网站上一样。要么全有,要么全无,它解决了我同样的问题。

很遗憾,我找不到有关如何使用 Flexdatalist 的完整说明。所以,我包括一个超级完整的演练和一个工作示例,如果它太多了,请原谅......

1。仅从 GitHub 上的 Flexdatalist 获取 两个 文件

  • jquery.flexdatalist.min.js
  • jquery.flexdatalist.css(您可以改用 .min.css,但您可能需要调整 CSS)

2。将这两个文件放在正确的位置:

我用过:

[DOMAIN]/js/jquery.flexdatalist.min.js

[DOMAIN]/css/jquery.flexdatalist.css

3。包含 CSS 文件

要么:

  • @import "jquery.flexdatalist.css"; 在您的 style.css 文件中已经在 [DOMAIN]/css/

  • &lt;link href="css/jquery.flexdatalist.css" rel="stylesheet" type="text/css"&gt; 在您的页面的&lt;head&gt; 标记与datalist之间

4。在包含 datalist&lt;input&gt; 元素中包含这些属性

(连同你的其他属性)

  • &lt;input... class="flexdatalist form-control" data-min-length="1" data-searchContain="true" multiple="multiple" ...&gt;

5。在 datalist 之后包含 三个 JavaScript 语句

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/jquery.flexdatalist.min.js"></script>
<script>
$('.flexdatalist-json').flexdatalist({
     searchContain: false,
     valueProperty: 'iso2',
     minLength: 1,
     focusFirstResult: true,
     selectionRequired: true,
});
</script>

工作示例:

[DOMAIN]/index.html:

<!DOCTYPE html>
<html>
<head>
<title>Flexdatalist Minimalist</title>
<link href="jquery.flexdatalist.css" rel="stylesheet" type="text/css">
</head>
<body>

<input type="text" placeholder="Choose a fruit"

  class="flexdatalist form-control"
  data-min-length="1"
  data-searchContain="true"
  multiple="multiple"

list="fruit" name="my-fruit">
<datalist id="fruit">
  <option value="Apples">Apples</option>
  <option value="Bananas">Bananas</option>
  <option value="Cherries">Cherries</option>
  <option value="Kiwi">Kiwi</option>
  <option value="Pineapple">Pineapple</option>
  <option value="Zucchini">Zucchini</option>
</datalist>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery.flexdatalist.min.js"></script>
<script>
$('.flexdatalist-json').flexdatalist({
     searchContain: false,
     valueProperty: 'iso2',
     minLength: 1,
     focusFirstResult: true,
     selectionRequired: true,
});
</script>

</body>
</html>

这里有两个文件:

[DOMAIN]/js/jquery.flexdatalist.min.js

[DOMAIN]/css/jquery.flexdatalist.css

具有大量文档的替代方法是:Awesomeplete

【讨论】:

    【解决方案3】:

    自定义数据列表接受多个值:

    每个条目后按,(逗号),然后按空格键

    var datalist = jQuery('datalist');
    var options = jQuery('datalist option');
    var optionsarray = jQuery.map(options ,function(option) {
            return option.value;
    });
    var input = jQuery('input[list]');
    var inputcommas = (input.val().match(/,/g)||[]).length;
    var separator = ',';
            
    function filldatalist(prefix) {
        if (input.val().indexOf(separator) > -1 && options.length > 0) {
            datalist.empty();
            for (i=0; i < optionsarray.length; i++ ) {
                if (prefix.indexOf(optionsarray[i]) < 0 ) {
                    datalist.append('<option value="'+prefix+optionsarray[i]+'">');
                }
            }
        }
    }
    input.bind("change paste keyup",function() {
        var inputtrim = input.val().replace(/^\s+|\s+$/g, "");
      //console.log(inputtrim);
        var currentcommas = (input.val().match(/,/g)||[]).length;
      //console.log(currentcommas);
        if (inputtrim != input.val()) {
            if (inputcommas != currentcommas) {
                var lsIndex = inputtrim.lastIndexOf(separator);
                var str = (lsIndex != -1) ? inputtrim.substr(0, lsIndex)+", " : "";
                filldatalist(str);
                inputcommas = currentcommas;
            }
            input.val(inputtrim);
        }
    });
    html,
    body {
      display: flex;
      align-items:center;
      flex-direction: column;
      justify-content: center;
      min-height: 100%
    }
    
    label {
      display: block;
      font-size: 15px;
      padding: 10px 0;
    }
    input {
      border: 2px solid #1E824C;
      color: #333;
      font-size: 12px;
      padding: 5px 3px
    }
    small {
      display: block;
      font-size: 11px;
      padding-top: 5px;
    }
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    
    <label for="authors">Type authors from favorite to least favorite</label>
    <input type="text" list="names-list" id="authors" value="" size="50" name="authors" placeholder="Type author names">
    <small>You can type how many you want.</small>
    <datalist id="names-list">
      <option value="Albert Camus">
      <option value="Alexandre Dumas">
      <option value="C. S. Lewis">
      <option value="Charles Dickens">
      <option value="Dante Alighieri">
    </datalist>

    【讨论】:

    • 当我按回车后按空格键时,空格立即被删除。它在哪个浏览器中像您描述的那样工作?
    • 每次选择后按逗号,然后按空格。上面的 jsfiddle 链接在 Chrome 上对我来说很好。
    • 啊,对不起,我误读为“按回车键,然后按空格键”。尽管如此,在按下空格键后,我得到了下拉菜单,但空格键本身被删除了,因此一旦我开始输入名称,下拉菜单就会消失。虽然,它以“逗号 - 空格 - 第一个字母 - 左 - 空格 - 右”的方式工作(在这个序列中,空格不会被删除)。包括在 Chrome 中
    • 不过,您的方法确实很有帮助且发人深省
    【解决方案4】:

    According to this 'multiple' 属性仅对 emailfile 输入类型有效。

    【讨论】:

      【解决方案5】:

      我遇到了同样的问题,建议的解决方案似乎并没有解决问题。我编写了这个 Pure JS(IE11 安全)插件UnComplete 来创建有助于管理多个值的交互。

      【讨论】:

      • 听起来很有趣,有在线演示吗?
      • 如果您使用的是 nodejs,它有一个可以运行的快速 Web 服务器,它提供了一个演示。我还没有时间整理一个 GitHub 网页。
      • 我明白了,谢谢分享,也许我会尝试一下
      【解决方案6】:

      我找到了另一种不使用任何外部工具的方法。

      HTML 示例

      <input type="email" class="multidatalist" multiple="multiple" name="search" list="tags" autocomplete="off" />
        <datalist id="tags">
          <option value="black">
          <option value="gold">
          <option value="grey">
        </datalist>
      

      jQuery 代码(也可以直接用 javascript 完成)

      $(".multidatalist").focusin ( function() { $(this).attr("type","email"); });    
      $(".multidatalist").focusout( function() { $(this).attr("type","textbox"); });
      

      这基本上将输入设置为“电子邮件”类型,当您单击框时,因此 HTML5 多数据列表正常工作。 然后当您点击退出时,输入会切换回“文本框”,这样您就可以提交表单而不受电子邮件限制。

      这对我有用,让我不必使用更复杂的 jquery/jscript 插件。

      【讨论】:

        猜你喜欢
        • 2017-06-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-12-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多