我发现新的<datalist>一般非常有用,但我认为这些建议不够明显.有没有办法触发使用javascript显示datalist建议？
举个例子,我在<input type="number">(jsFiddle)上有一个数据表.
<label>
Enter a Fibonacci number:
<input type="number" list="fibonacci" min="0" id="myinput">
</label>
<datalist id="fibonacci">
<option value="0">
<option value="1">
<option value="2">
<option value="3">
<option value="5">
<option value="8">
<option value="13">
<option value="21">
</datalist>
<button type="button" id="show-suggestions">Show suggestions</button>
<script>
$('#show-suggestions').click(function() {
// .showSuggestions() does not exist.
// I'd like it to display the suggested values for the input field.
$('#myinput').showSuggestions();
});
</script>
在Chrome中,仅当输入为空,已有焦点且用户随后点击输入时,才会显示完整的建议列表.向下箭头不显示建议 - 它只是递减值.
我想让建议更加明显.作为一个例子,我添加了一个应该打开建议列表的按钮.我在onClick处理程序中放了什么？
我在本例中使用了Chrome,jQuery和数字输入,但我更喜欢独立于所有这些的通用解决方案.
在下面的代码段中,我有两种方法可以选择项目:使用datalist输入和使用选项进行传统选择.
select元素保持选项值隐藏,我们仍然可以使用它this.value.但是,对于datalist,实际显示该值,并且该选项的文本内容显示为辅助标签.
我想要的是让输入+数据主义方法的行为类似于传统的选择,其中"Foo"和"Bar"显示为选项,当选择时分别具有值"1"和"2".
我还添加了一个重复的名称"Foo",其值为"3".这表明任何解决方案都不能依赖于唯一选项.
<input list="options" onchange="console.log(this.value)"/>
<datalist id="options">
<option value="1">Foo</option>
<option value="2">Bar</option>
<option value="3">Foo</option>
</datalist>
<select onchange="console.log(this.value)">
<option value=""></option>
<option value="1">Foo</option>
<option value="2">Bar</option>
<option value="3">Foo</option>
</select>您可以选择option任何select元素的当前值:
mySelect.options[mySelect.selectedIndex]
我可以用DataList做同样的事吗？像这样的东西:
<input id = "input" list = "datalist" type = "text" />
<datalist id = "datalist">
<option value = "No. 1"></option>
<option value = "No. 2"></option>
<option value = "No. 3"></option>
</datalist>
<script>
var datalist = document.getElementById ("datalist");
var input = document.getElementById ("input");
input.addEventListener ("keyup", function (event) {
if (event.which === 13) {
alert (datalist.options[datalist.selectedIndex]); // Example
}
}, false);
</script>
我有这个例子:
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
当用户选择选项(使用鼠标或键盘)时,我需要捕获一个事件.
我试着做onchange ="MySuperFunction();" 但这仅适用于选择项目然后列表未聚焦的情况.
这段代码适用于除Internet Explorer 9之外的所有主流浏览器.我不明白我做错了什么,这可能是我想念的简单.
复制此代码(或使用此jsFiddle)来查看IE9中的问题:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Datalist fetching in IE9</title>
<script type="text/javascript">
//document.createElement('datalist');//this seems to fix it for IE6, but not for IE9
window.onload = function() {
alert(document.getElementById('languages').getElementsByTagName('option').length);//should alert 42
};
</script>
</head>
<body>
<form method="post">
<input name="language" type="text" value="English" list="languages" />
<datalist id="languages">
<option value="Arabic" />
<option value="Bengali" />
<option value="Bulgarian" />
<option value="Catalan" />
<option value="Chinese" />
<option value="Croatian" />
<option value="Czech" />
<option value="Danish" />
<option value="Dutch" /> …javascript html5 cross-browser internet-explorer-9 html-datalist
我有一个问题,表现在Chrome和Firefox处理HTML5 datalist元素之间.
我可能正在滥用它,Firefox正在以我期望的方式处理,但Chrome不是.我没有在Opera上试过它.这是针对内部页面的,因此我可以控制正在使用的浏览器.
我设置了一个值,以及内部文本,如:
<input list="Names" placeholder="Enter Name or ID" name="txtSearchValue" autocomplete="off"/>
<datalist id="Names"><%=OptionsList%></datalist>
服务器端值"OptionsList"是从数据库查询动态构建的.最终结果大致如下:
<option value="123">Sam's Fresh Sandwiches</option>
<option value="234">Sawatdee</option>
等等
在Firefox上,我可以输入字母"S",然后输入"A"(不区分大小写),并且上面的两个条目都会出现.只要我键入"W"或用鼠标选择Sawatdee,文本框就会填充为234.这就是我希望发生的事情 - 因为我希望234发送回服务器而不是Sawatdee.如果我输入"A"然后输入"T",它也有效.
在Chrome上,我可以输入我想要的所有字母,但列表中不会显示任何内容.但是,如果我键入2,则只会出现第二个条目; 但是在列表中它会显示一个2,然后是Sawatdee.
我是否过度使用/滥用数据列表,或Chrome是否存在问题？或者是Chrome处理它,因为它在技术上应该是,我发现了一个Firefox错误？
我有一个输入文本字段,我触发键事件.在输入时,我使用输入值处理一些特定代码.一切都很棒.
HAML:
%input#myField{:type => "text"}
JavaScript的:
my_field = document.getElementById('myField');
my_field.addEventListener("keypress", function (event) {
if (event.keyCode == 13) {
event.preventDefault();
if (tag_field.value.length != 0) {
console.log(my_field.value);
// Run my specific process with my_field.value
my_field.value = '';
}
}
}, false);
但是现在我想在这个输入上添加datalist.
HAML:
%input#myField{:list => "htmlList", :type => "text"}
%datalist#htmlList
%option{:value => "toto"} toto
%option{:value => "foo"} foo
问题是当我在datalist上导航以选择项目时,我按下回车键.在输入键时,我的侦听器被调用并使用输入的初始值处理我的代码.
在此步骤中,该字段的值为空.之后,该值将替换为datalist中选择的值.
所以我的问题是:
有没有办法改变数据列表的行为,用datalist选择的值替换输入值而不按回车键？(禁用datalist的输入键)
有没有办法检测datalist何时处于活动状态(或可见状态)以处理EventListener中的不同行为？
我正在datalist动态地将选项加载到HTML5 元素中.但是,浏览器会尝试datalist在加载选项之前显示.这导致列表未被显示或者有时显示部分列表.有没有办法在加载选项后通过JavaScript刷新列表？
HTML
<input type="text" id="ingredient" list="ingredients">
<datalist id="ingredients"></datalist>
JavaScript的
$("#ingredient").on("keyup", function(event) {
var value = $(this).val();
$.ajax({
url: "/api/ingredients",
data: {search: value.length > 0 ? value + "*" : ""},
success: function(ingredients) {
$("#ingredients").empty();
for (var i in ingredients) {
$("<option/>").html(ingredients[i].name).appendTo("#ingredients");
}
// Trigger a refresh of the rendered datalist
}
});
});
注意:在Chrome和Opera中,仅当用户在输入文本后单击输入时,才会显示整个列表.但是,我希望整个列表显示为用户类型.Firefox不是问题,因为它似乎在更新选项时自动刷新列表.
UPDATE
我不确定这个问题是否有令人满意的答案,因为我认为这只是某些浏览器的缺点.如果a datalist已更新,浏览器应刷新列表,但某些浏览器(包括Chrome和Opera)根本不这样做.黑客？
我正在尝试获取数据主义者的悬停元素的当前值.因此,如果我打开带有值的datalist并将鼠标移到它们上面,我希望这些值出现在控制台中.
这是我的尝试:
<input list="browsers" id="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
$("#browsers").on("mouseover", function() {
console.log($(this).value());
});
这是一个小提琴:https://jsfiddle.net/sshcvr5q/
我正在尝试以最简单的方式实现HTML5 datalist元素.
像这样的东西:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
但这不起作用.如果不安装(npm)其他东西,我的下一步是什么.
基本上,我正在使用普通输入反应元素并希望嵌入数据列表.
这是我的反应代码:
<input className={"custom_input inline "+this.isValidInteger(this.props.price.price_first,0,2000000)}
style={{marginRight:'5px'}}
value={this.props.price.price_first || ''} type="text"
onChange={(e)=>this.props.dispatch({type:"price", payload:e.target.value})}
placeholder=" Unesite..."
maxLength="10"/>
所以我想要一个下拉列表.
html-datalist ×10
html5 ×8
javascript ×7
html ×2
jquery ×2
ajax ×1
events ×1
html-select ×1
input ×1
list ×1
reactjs ×1