26

我正在使用该标签为我的搜索框创建建议列表，但我无法从数据列表中选择多个值。目前，我的 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>

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

有什么建议么？

4

6 回答 6

21

多个当前仅适用于 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>

第一个输入会起作用，第二个不会。

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

于 2014-10-15T09:44:17.987 回答
4

超简单的jQuery工具：Flexdatalist

我想要一些更简单的东西，但据我了解，“多重”属性仅适用于电子邮件和文件，因为 HTML5 开发人员不想打开一罐蠕虫，但开发人员正在考虑改变。在搜索完所有内容之后，我可以让它工作的唯一方法是在列表中获得那些花哨、有用的“#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/

或者

  • <link href="css/jquery.flexdatalist.css" rel="stylesheet" type="text/css"> 在您<head>的页面标签之间datalist

<input>4. 在包含您的元素的元素中包含这些属性datalist

（连同您的其他属性）

  • <input…… class="flexdatalist form-control" data-min-length="1" data-searchContain="true" multiple="multiple"_>

5. 在你的后面包含三个JavaScript 语句datalist

<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

于 2019-10-16T00:20:55.503 回答
2

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

每次输入后按,（逗号），然后按空格键

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>

于 2017-11-10T22:54:22.783 回答
1

根据此“多个”属性仅对电子邮件和文件输入类型有效。

于 2016-02-05T18:57:38.073 回答
1

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

于 2019-09-12T15:21:34.423 回答
0

我在不使用任何外部工具的情况下找到了另一种解决方法。

示例

<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 插件。

于 2022-03-03T03:17:38.990 回答