与datalist多选 [英] multiple selections with datalist

查看:843
本文介绍了与datalist多选的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

 < html> 

< form action =search_tags.phpmethod =GET/>

搜索:< input type =textmultiple =multiplename =searchlist =tagsautocomplete =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>

它会提供一个项目的建议,但在此之后,这些建议不会为我提供自动填充第二选择。我认为'多重'标签是我所需要的(以及网上建议的),但它似乎并没有达到预期效果。



有什么建议? / p>

解决方案

多个目前只能使用输入类型=email,只能在Chrome和Opera中使用

看这个最简单的例子:

 < input type =emaillist =emailsmultiple> ; 
< datalist id =emails>
< option value =first@example.com>
< option value =second@example.com>
< option value =third@example.com>
< option value =last@example.com>
< / datalist>

< input type =textlist =textsmultiple>
< datalist id =texts>
< option value =black>
< option value =gold>
< option value =gray>
< option value =pink>
< option value =turquoise>
< option value =red>
< option value =white>
< / datalist>

http://jsfiddle.net/iiic/t66boyea/1/



第一个输入将起作用,第二个输入不会。您只需按逗号,列表将显示为与点击输入时相同。


I'm using the tag to create a list of suggestions for my search box, but I cannot select multiple values from the datalist. Currently, my HTML is:

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

It will offer suggestions for one item, but after that the suggestions won't suggest an autocomplete for my second option. I thought that the 'multiple' tag was all I needed (and what is suggested online) but it doesn't seem to have the desired effect.

Any suggestions?

解决方案

Multiple currently working only with input type="email" and only in Chrome and Opera

look at this minimalist example:

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

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

( http://jsfiddle.net/iiic/t66boyea/1/ )

First input will be working, second NOT. You only press comma, and list will appear as same as on click into input.

这篇关于与datalist多选的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆