标签: html-datalist
setAttribute是在input元素中设置list = <id datalist>的唯一选项吗？
我很高兴设置list元素的list属性.
var sel = document.createElement("input");
sel.type = "text";
sel.id = "inputSelectNaam";
sel.list = "inputNamesList";
当然这不起作用,因为list属性不是我想要的"list = {id for datalist}".使这项工作的唯一方法是使用setAttribute.
如何在不使用setter但直接更改属性的情况下解决此问题？
编辑:更好的代码段.
sel.list = id,我也提到过,在我的代码中不起作用.
var sel = document.createElement("input");
sel.type = "text";
sel.id = "inputSelectNaam";
sel.list = "inputNamesList"; //Does not work.
//sel.setAttribute("list", "inputNamesList"); //Works
sel.name = "name"; //FIXME: We should reconsider the name name...
frm.appendChild(sel);
var datl = document.createElement("datalist");
datl.id = "inputNamesList";
//populating the dataList
frm.appendChild(datl);
当我查看Dragonfly时,我看到setAttribute("list",id)没有设置list属性.
推荐指数
解决办法
查看次数
HTML5 datalist - 模拟click事件以公开所有选项
当单击一个按钮使输入元素成为焦点时,我试图自动向用户显示datalist html5元素的所有选项.通常,当用户单击两次关联的文本输入元素时,将显示所有选项.我想以编程方式模拟此行为,以便用户可以在开始键入之前查看所有选项.
我曾尝试通过使用越来越注重模拟单击和双击$('#text-input').focus();(这工作),然后使用jquery .click(),(一次两次).dblclick(),.trigger('click')甚至使用jquery.simulate.js.所有这些都会触发$('#text-input').click(function() {...});但实际上不会影响浏览器中可见输入元素的状态.
这是我的HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="main">
<form>
<datalist id="categories">
<option value="travel">
<option value ="work">
<option value="literature">
<option value="teaching">
</datalist>
<input type="text" list="categories" id="text-input">
<button type="button" id="mic-button">
</button>
</form>
</div>
</body>
</html>
我的代码与dblclick尝试:
(function($) {
$(document).ready(function() {
var textInput = $('#text-input');
textInput.dblclick(function() {
alert('Handler for .dblclick() called.');
});
$('#mic-button').click(function() {
textInput.focus();
// list all the options by tricking the …推荐指数
解决办法
查看次数
如何从字典填充大型数据列表（~2000 项）
现在我正在使用以下代码，但它在 Chrome 上需要大约 10 秒，在 IE11 上需要大约 2 分钟，这是它最终被使用的地方。
for (var key in dict) {
if (dict.hasOwnProperty(key)) {
combo.innerHTML += "<option value=\"" + dict[key] + "\">" + key + "</option>";
}
}
我正在阅读本教程：http : //blog.teamtreehouse.com/creating-autocomplete-dropdowns-datalist-element，其中建议在处理较大数量时使用 ajax，但我不确定 large 是指 100 个项目还是100,000 项。
var request = new XMLHttpRequest();
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
if (request.status === 200) {
var jsonOptions = JSON.parse(request.responseText);
jsonOptions.forEach(function(item) {
var option = document.createElement('option');
option.value = item;
dataList.appendChild(option);
});
} else { …推荐指数
解决办法
查看次数
有没有办法限制输入类型=颜色中数据列表的选择并禁用其他...选项？
下面的代码生成下拉列表以从数据列表中选择颜色，但也提供“其他”选项。我想将颜色的选择限制为我提供的选项。
<input type="color" id="some id" name="someName" list="rainbow" value="#FF0000">
<datalist id="rainbow">
<option value="#FF0000">Red</option>
<option value="#FFA500">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#008000">Green</option>
<option value="#0000FF">Blue</option>
<option value="#4B0082">Indigo</option>
<option value="#EE82EE">Violet</option>
</datalist>
推荐指数
解决办法
查看次数
Angular2:如何将选定的项目从HTML datalist元素传递回组件？
我有一个简单的组件,其中包括一个dreate下拉框.这个列表中填充了Web API调用的结果.出于显示目的,我只使用该项目的两个字段.但是,一旦选择了一个元素,我需要对所有其他字段进行处理.如何将整个元素传递回组件？
真的很感激任何帮助.
<h1>Get Locations</h1>
<div>
<div>
<input list="browsers" name="browser" #term (keyup)="search(term.value)">
<datalist id="browsers">
<option *ngFor="let item of items | async" >
{{item.code + " " + item.description}}
</option>
</datalist>
</div>
<input type="submit" value="Click" (click)="onSelect(item)" />
</div>
组件代码如下:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { LocationService } from './location.service';
import {Location} from './location.component';
import './rxjs-operators';
@Component({
selector: 'lesson-08',
templateUrl: './views/lesson08.html',
providers: [LocationService]
})
export class Lesson08 …推荐指数
解决办法
查看次数
是否存在与选择数据列表 <option> 相关的事件？
我有一个<input>字段中的（动态）选择列表：
<input list="choices">
<datalist id="choices">
<option>one</option>
<option>two</option>
</datalist>在做出选择后是否会立即触发事件<option>？（如果这很重要，我想在 Vue.js 中捕获/使用它）。这将是在以下场景中单击鼠标左键时：
推荐指数
解决办法
查看次数
Angular 中的数据列表
我有一个<datalist>和<select>如下：
更新：
示例 1：
<input type="text" list="codes" [(ngModel)]="codeValue" (change)="saveCode(codeValue)">
<datalist id="codes">
<option *ngFor="let c of codeList" [value]="c.code" >{{c.name}}</option>
</datalist>
<select type="text" list="codes" [(ngModel)]="codeValue1" (change)="saveCode(codeValue)">
<option *ngFor="let c of codeList" [value]="c.code" >{{c.name}}</option>
</select>
component.ts 中的 codeList 数组
codeList = [
{ code: 'abcdhe568dhjkldn', name: 'item1' },
{ code: 'ksdkcs7238t8cds', name: 'item2' },
{ code: 'kascggibebbi', name: 'item3' }
];
DataList 在选项中显示名称 (c.name) 和值 (c.code) 并存储值中存在的任何内容，而 select 显示名称 (c.name) 并存储值 (c.code)。
数据列表的行为
选择的行为
示例 2：
<datalist id="codes">
<option …推荐指数
解决办法
查看次数
HTML5 数据列表 - 以编程方式显示选项列表
我是 HTML5 数据列表的新手。我已经设置了<input type="text">与以下内容相关的内容<datalist>：
例如：
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Chrome / Chromium 将输入显示为组合框，允许列出所有可能的值：
Firefox 将输入显示为任何其他文本字段，但我意识到可以双击该字段或单击该字段并按向下箭头键来显示所有选项：
我需要实现一个与浏览器无关的按钮，在单击该按钮时显示该选项列表。喜欢：
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<button type="button">Show options</button>
我怎样才能实现这样的按钮？
推荐指数
解决办法
查看次数
如何用javascript显示数据列表？
嘿，我想在单击按钮时显示特定输入的数据列表，但我找不到如何操作。
HTML
<input type="text" name="" value="" list="list" id='input'>
<datalist id='list'>
<option value="aaa">
<option value="bb">
</datalist>
<div onclick="showDataList(event,'input')">
Click
</div>
JS
function showDataList(e,id) {
document.getElementById(id).list.show()
}
我试过双焦点（），焦点（）和点击（）并检查哪个事件数据列表显示功能触发但无济于事。
推荐指数
解决办法
查看次数
您可以以编程方式显示数据列表下拉列表吗？
我开始使用数据列表，它具有我需要的功能，但没有按照我想要的方式执行。具体来说，问题在于 Firefox 中，下拉菜单的激活是通过双击输入元素触发的，而不是像 Chrome 或 Edge 中那样通过单击来触发。有没有办法在 Firefox 中单击一下即可触发下拉菜单？如果没有，我可以从 NPM 或其他地方使用一些元素来允许此类自定义吗？
到目前为止，我已经检查了很多关于数据列表的帖子，但他们很少包含这个问题，当他们这样做时，解决方案并没有真正提供或者不起作用。下拉菜单是通过鼠标单击或按键触发的，因此显而易见的解决方案是触发事件。这不起作用，我能够触发该事件，但它从未触发下拉菜单。程序事件从未触发下拉菜单，而用户事件却触发了。我什至尝试存储用户事件并使用它，但这也不起作用。本质上，事件触发解决方案完全无法提供任何结果，遗憾的是我也不再拥有代码了。有任何想法吗？
<input id="test-input" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
推荐指数
解决办法
查看次数
标签 统计
html-datalist ×10
javascript ×6
html ×5
angular ×3
html5 ×2
typescript ×2
ajax ×1
attributes ×1
click ×1
colors ×1
css ×1
datalist ×1
dictionary ×1
dom-events ×1
firefox ×1
html-input ×1
input ×1
jquery ×1
setattribute ×1
simulate ×1