标签: html-datalist
找不到带有“@testing-library/cypress”的数据列表选项
我正在尝试编写一个测试，以确认 a具有使用来自 的基于角色的查询<datalist/>的元素列表。奇怪的是，当我尝试按角色查询时：<option/>@testing-library/cypressoption
cy.findByRole('option')
...我没有返回任何结果：
4000 毫秒后超时重试：无法找到具有“选项”角色的可访问元素
...尽管页面中出现内容：
<datalist id="subjects-list">
<option value="one">one</option>
<option value="two">two</option>
</datalist>
<input list="subjects-list" value=""/>
有没有办法找到这些选项@testing-library/cypress？
wai-aria html-datalist cypress testing-library cypress-testing-library
推荐指数
解决办法
查看次数
基于复合组件中的动态列表渲染多个 <option> 元素
我正在使用 JSF 2.2 和 Prime Faces 5.3。
我正在尝试创建一个具有动态选项的 html5 组件。目标是创建类似于 f:selectItems 标记的内容
目前我有以下用于 datalist 标签的代码（datalist.xhtml 文件）
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns:cc="http://xmlns.jcp.org/jsf/composite">
<cc:interface></cc:interface>
<cc:implementation>
<datalist id="#{cc.attrs.id}">
<cc:insertChildren/>
</datalist>
</cc:implementation>
</html>
以及单个选项的以下内容（option.xhtml 文件）
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns:cc="http://xmlns.jcp.org/jsf/composite">
<cc:interface>
<cc:attribute name="value" type="java.lang.String" default=""/>
<cc:attribute name="label" type="java.lang.String" default=""/>
</cc:interface>
<cc:implementation>
<option value="#{cc.attrs.value}" label="#{cc.attrs.label}"/>
</cc:implementation>
</html>
通过这种方法我可以创建这样的东西
<myTag:dataList id="test">
<myTag:option value="1" label="label1"/>
<myTag:option value="2" label="label2"/>
<myTag:option value="3" label="label3"/>
</myTag:dataList>
但我需要一些能让我拥有动态选项列表的东西。我希望编写以下代码（或类似的代码）
<myTag:dataList id="test">
<myTag:options value="#{myBean.myCollection}" var="mySingleObj" itemValue="mySingleObj.value" itemLabel="mySingleObj.label"/>
</myTag:dataList>
推荐指数
解决办法
查看次数
jQuery：设置数据列表的值？
<input list="countries" type = 'text' id='country'>
<datalist id="countries">
<option data-value='1' value='India'></option>
<option data-value='2' value='USA'></option>
<option data-value='3' value='UK'></option>
</datalist>
如何使用 jQuery 或 JavaScript 动态地将值设置为 India？
推荐指数
解决办法
查看次数
如何设置datalist以显示焦点上的所有选项？
我想在下面的快照中创建一个下拉列表.我用Google搜索并知道HTML5 datalist可以帮助我做到这一点.但是,当焦点在其上时,datalist不会显示所有选项.如何显示所有选项？
到目前为止,这是我的代码:
<input list="theaters" name="theaters">
<datalist id="theaters">
<option value="Inox">
<option value="E Square">
</datalist>
</input>
推荐指数
解决办法
查看次数
按回车键确定是否从 HTML 5 数据列表中选择了一个元素
jQuery(document.body).on('input', '.icdCodeInput', function (event) {
});
我有一个带有 icdCodeInput 类的 HTML 5 数据列表。当我使用鼠标或按 Enter 从列表中选择一个项目时，上述事件被触发。如果通过按 Enter 键选择了项目，我如何在事件内部进行区分？
推荐指数
解决办法
查看次数
为什么.change()不适用于datalist元素？还有其他选择吗？
我已经对该主题进行了一些谷歌搜索,但由于浏览器对datalist元素的支持仍然很差,似乎没有人使用它或者之前没有真正问过这个问题.我有一个数据主义者:
<form>
<input placeholder="Enter a location or choose from the list" list="restaurants" id="hp-restaurants">
<datalist id="restaurants">
<option value="Sanford, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/sanford/" />
<option value="Kitery, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/kittery/" />
<option value="Belfast, ME" data-attr="<?php echo site_url(); ?>/locations/lobster-in-the-rough/belfast/" />
<option value="Waterville, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/waterville/" />
<option value="Brewer, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/brewer/" />
<option value="South Portland, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/south-portland/" />
<option value="Bedford, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/bedford-nh/" />
<option value="Dover, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/dover-nh/" /> …推荐指数
解决办法
查看次数
如何在 Formik 中使用数据列表输入？
我正在尝试在 ReactJS 中以 formik 形式使用 datalist。我正在尝试以 formik 形式在 datalist 选项中动态显示数组列表。所以，我做了如下：
<Formik
initialValues={initialValues}
validationSchema={AddEmployeeFormValidationSchema}
onSubmit={props.handleSubmitMethod}
>
{(formikProps) => (
<Form onSubmit={formikProps.handleSubmit}>
<div className="form-row">
<Col>
<FormGroup>
<label>Designation</label>
<Field
type="text"
name="designation"
list="designations"
id="designation"
>
<datalist id="designations">
{props.designations.map((designation) => {
return (
<option
value={`${designation.id}`}
key={`${designation.id}`}
>
{`${designation.designation_title}`}
</option>
);
})}
</datalist>
</Field>
<ErrorMessage
name="designation"
component="div"
className="text-danger"
/>
</FormGroup>
</Col>
<div className="form-row mt-3 text-right">
<Col>
<Button
className="primary-color"
type="submit"
disabled={!formikProps.dirty || formikProps.isSubmitting}
>
Submit
</Button>
</Col>
</div>
</Form>
)}
</Formik>
但它向我显示以下错误：
Error: input is a void …推荐指数
解决办法
查看次数
如何使用纯 Javascript 从输入数据列表中获取建议值？
我使用纯文本输入和数据列表在用户与输入交互时建议值。我想知道是否有办法显示建议的项目。
例如
document.getElementById('myBrowser').addEventListener('input', function() {
console.log(this.list.suggested); // logs out the suggested values
}); <label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>因此，如果我输入“Fire”，建议值应该是 ['Firefox']
推荐指数
解决办法
查看次数
将CSS放入<datalist>
所以现在我有一个简单的datalist下拉菜单，我想更改它的CSS，以便样式与网站上的其他字段匹配。但是我是一个网页设计的菜鸟，我有点困惑，以完成此过程。
请参阅：http : //jsfiddle.net/ryax5L29/20/
<input list="ServiceCity">
<datalist id="ServiceCity" name="ServiceCity"class = "atl_services">
<option value "" disabled selected>Select City/County</option>
.......other values
</datalist>
这是我要使用的CSS
input{
padding: 7px;
outline: none;
max-width: 100%;
margin-bottom: 5px;
border-width: 1px;
border-style: solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px
width: 88.5%;
border: 1px solid GREY;
box-shadow: 0px 0px 3px GREY;
}
我也有CSS，imo内联CSS是最容易的，但是如果有人可以指导我，那将非常感谢！
推荐指数
解决办法
查看次数
标签 统计
html ×3
jquery ×3
html5 ×2
javascript ×2
autosuggest ×1
css ×1
cypress ×1
formik ×1
input ×1
jsf ×1
optionmenu ×1
reactjs ×1
wai-aria ×1