标签: html-datalist
HTML表单:Select-Option vs Datalist-Option
我想知道Select-Option和Datalist-Option之间的区别.是否存在使用其中一种更好的情况？每个例子如下:
选择 - 选项
<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>
数据列表,期权
<input type=text list=browsers>
<datalist id=browsers>
<option value="Firefox">
<option value="IE">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
推荐指数
解决办法
查看次数
显示datalist标签,但提交实际值
目前<datalist>大多数主流浏览器(Safari除外)都支持HTML5 元素,这似乎是一种向输入添加建议的有趣方式.
但是,value属性的实现与内部文本之间似乎存在一些差异<option>.例如:
<input list="answers" name="answer">
<datalist id="answers">
<option value="42">The answer</option>
</datalist>
不同浏览器的处理方式不同:
Chrome和Opera:
FireFox和IE 11:
选择一个后,输入将填充值而不是内部文本.我只希望用户在下拉列表和输入中看到文本("答案"),但是将值传递给42提交,就像一个select遗嘱.
如何让所有浏览器都有下拉列表显示<option>s 的标签(内部文本),但在value提交表单时发送属性？
推荐指数
解决办法
查看次数
有没有办法在HTML5 datalist选项上应用CSS样式？
我想修改显示我的datalist的不同选项列表的方式.是否可以在其上应用一些CSS属性？
<input list="languages" id="language_id">
<datalist id="languages">
<option value="html">HTML</option>
<option value="java">Java</option>
<option value="perl">Perl</option>
<option value="php">PHP</option>
<option value="ruby-on-rails">Ruby on Rails</option>
</datalist>
我试过了
option {
background: red;
}
但它似乎没有用.
推荐指数
解决办法
查看次数
如何在html中继续使用datalist元素时关闭自动完成功能
我有一个input字段,显示使用html5 <datalist>元素的列表.问题是,<datalist>浏览器自动完成也会显示历史列表(这是以前键入的值列表,不包括在内<datalist>).所以我只想摆脱history-list不是<datalist>.
如果我使用该autocomplete = "off"功能,这也会阻止<datalist>.
简而言之,我只想要的<datalist>不是历史.
推荐指数
解决办法
查看次数
使用HTML5 <datalist>时是否可以设置下拉建议的样式？
看到这里:http://jsfiddle.net/zemar (必须使用Firefox或Opera查看)
当您单击时select,下拉列表的样式将匹配,但如果您开始在文本框中的数据列表中键入一个术语,则显示的建议不会设置样式,因此它与其余部分不匹配造型.
是否可以设置下拉菜单的样式？
* {margin:0; padding:0; font-family: arial, sans-serif; font-size: 40px; font-weight: bold; color: #444;}
body {height:100%; background:#F4F3EF;}
.select select, .input input {background: transparent; width: 220px; overflow:hidden; height: 65px; padding-left: 5px;
padding-bottom: 5px; -webkit-appearance: none; -moz-appearance:none; appearance:none; border:none; cursor:pointer;}
.select select {padding-top: 5px;}
.select, .input {float:left; width: 220px; height: 65px; margin-right: 20px; overflow: hidden; background: #ddd;
border: 1px solid #ccc;} <div class="select">
<select id="count">
<option value="1">A</option>
<option value="2">A pair of</option>
<option value="3">A few</option>
<option …推荐指数
解决办法
查看次数
使用带有'包含'方法的HTML5(datalist)自动完成功能,而不只是'开头'
(我找不到它,但我又不知道如何搜索它.)
我想使用<input list=xxx>并<datalist id=xxx>获得自动完成功能,但我希望浏览器通过"包含"方法匹配所有选项,而不是"开始于",这似乎是标准的.有办法吗？
如果不是简单,有没有办法强制显示我想要显示的建议,而不是浏览器匹配的建议？假设我正在键入"foo",我想显示选项"bar"和"baz".我可以强迫用户使用吗？如果我只是用那些(用JS)填充datalist,浏览器仍然会执行'start with'检查,并将其过滤掉.
我希望最终控制数据主义选项如何显示.不要超过它的UI,灵活性,可访问性等,所以我不想完全重新制作它.甚至不建议使用jQuery插件.
如果我可以最终控制表单元素验证,为什么不自动完成,对吧？
编辑:我现在看到Firefox确实使用'包含'方法......那甚至不是标准？有什么方法可以强迫这个？我可以改变Firefox的方式吗？
编辑:我这是为了说明我喜欢的内容:http://jsfiddle.net/rudiedirkx/r3jbfpxw/
推荐指数
解决办法
查看次数
使用datalist进行多项选择
我正在使用标签为我的搜索框创建建议列表,但我无法从数据列表中选择多个值.目前,我的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>
它会为一个项目提供建议,但之后建议不会建议我的第二个选项自动完成.我认为"多重"标签是我所需要的(以及网上建议的内容),但它似乎没有达到预期的效果.
有什么建议？
推荐指数
解决办法
查看次数
如何在datalist html5中显示文本而不是值
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">1</option>
<option value="Firefox">2</option>
<option value="Chrome">3</option>
<option value="Opera">4</option>
<option value="Safari">5</option>
</datalist>
http://jsfiddle.net/j7ehtqjd/1/
我附上了一个小提琴.请检查.我想要实现的解决方案是当我单击下拉列表时显示该值,但我希望显示文本1,2,3,4,5.我必须使用json响应来解决我的实际问题.只应显示文本,并且值应该像常规下拉列表一样隐藏.此自动完成功能是必要的,否则我将使用正常的下拉列表.
推荐指数
解决办法
查看次数
单击HTML5 Datalist选项时的jQuery事件
我现在拥有的:
所以我有这个HTML5 Datalist,里面有很多选项,我有2个事件被触发.一个当用户键入一些匹配某些名称的东西时,这些名称填充了诸如"Rick Bross"或"Jack Johnson"(keyup)之类的选项.当用户开始键入名称时会触发另一个事件,它会弹出,用户向下箭头,然后点击"输入"(更改).
问题:
当用户点击其中一个下拉选项时,我需要触发一个事件,在他输入全名之前,以及在对象模糊之前.如果用户在完全输入名称之前立即单击一个,则只有输入模糊后,2个事件才会触发该功能.
标记:
<datalist id="potentials">
<option value="Rick Bross">
<option value="Jack Johnson">
<option value="Rick Bross">
<option value="Rick Bross">
</datalist>
Javascript事件和功能:
window.checkModelData = function(ele)
{
var name = $(ele).val().replace(" ", "");
var mod = potentialModels[name];
if(mod) {
loadModelData(name);
}
}
function loadModelData(name) {
var mod = potentialModels[name];
$("#address").val(potentialModels[name].address);
$("#city").val(potentialModels[name].city);
$("#state").val(potentialModels[name].state);
$("#email").val(potentialModels[name].email);
$("#phone").val(potentialModels[name].phone);
$("#zip").val(potentialModels[name].zip);
}
$("#name").keyup(function(){
window.checkModelData(this);
});
$("#name").change(function(){
window.checkModelData(this);
});
推荐指数
解决办法
查看次数
javascript中数组的Html datalist值
我有一个简单的程序,它必须从服务器上的文本文件中获取值,然后填充在datalist上作为输入文本字段中的选择.
为此,我想采取的第一步是我想知道如何动态地将javascript数组用作数据列表选项.
我的代码是:
<html>
<script>
var mycars = new Array();
mycars[0]='Herr';
mycars[1]='Frau';
</script>
<input name="anrede" list="anrede" />
<datalist id="anrede">
<option value= mycars[0]></option>
<option value="Frau"></option>
</datalist>
</html>
我想填充包含datalist的输入文本字段作为数组的建议.在这里,我没有考虑数组值.实际上我不需要两个datalist选项,但dxnamic取决于数组长度
推荐指数
解决办法
查看次数
标签 统计
html-datalist ×10
html5 ×10
autocomplete ×2
css ×2
html ×2
javascript ×2
jquery ×2
option ×2
arrays ×1
forms ×1
html-select ×1