1. IT宝库
  2. 编程技术问答
  3. html-datalist
以下是关于 html-datalist 的编程技术问答
Vue.js中Chrome和Datalist的性能问题
我在vue.js中使用Google Chrome(最新版本:83.0.4103.97)存在性能问题. 我不得不说我几个月前开始学习vue.js，所以我仍然是菜鸟. 使用Firefox一切正常，数据师和过滤立即起作用. 使用Chrome，所有内容都很慢...我在输入字段中输入，字母出现非常缓慢(或一次)，我必须等待很多秒钟才能使用过滤器.之后，我必须在元素上多次单击以填充字段. 这是浏览器行为和我代码部分的视频. firefox: https://streamable.com/vj4rbb chrome: https://streamable.com/2sikq5 组件代码:
0 2023-11-25
编程技术问答社区
HTML5数据列表能否区分值和选项文本？
HTML5表单的列表属性/数据库元素显示了一个可以从中选择，编辑甚至输入某些文本的选项下拉菜单.所有这些都可以通过干净有力的代码立即实现: 但是，如何使这样的表单发送与选项文本不同的值，如通常的选择/选项(下图)? One Two 解决方案 似乎不使用一些JS+CSS帮助. 尝试一下，我希望它能为您提供帮助. html
2 2023-08-25
编程技术问答社区
在React控制的组件中点击时清除数据列表输入
i有一个HTML5输入，其中有一个相关的数据库在React控制的组件中.我想在单击输入字段或接收到焦点时清除文本，以便显示所有选项以进行选择.我在中遵循了Alfred的出色答案.在反应控制的组件中获得完全相同的结果.不幸的是，在OnClick Handler中调用Blur会阻止我的用户输入超过单个字符，因为焦点(当然)丢失了. 我如何维护用户键入但清除文本的能力，并在单击文本框时显示完整的选项? import React, { useState } from "react"; const MyForm = () => { const [options, setOptions] = useState(["Apples", "Oranges", "Bananas", "Grapes"]); const handleChange = (event) => { event.target.blur(); }; const clear = (event) =
6 2023-07-30
编程技术问答社区
React.js是否支持HTML5数据列表？
我正在尝试以最简单的方式实现HTML5数据库元素. 类似的东西: 这不起作用.不必安装(npm)其他内容的下一步是我的下一步. 基本上，我正在使用普通输入 React元素，并且要嵌入数据库. 这是我的反应代码:
8 2023-07-28
编程技术问答社区
获取数据列表中选定项目的Id
我有一个输入元素和一个数据师以寻求建议.我正在向数据师喂一些对象，以获取看起来像这样的建议 [ { "id": "9cb98eab-7cd4-47d0-8b30-5512a826a3c0", "type": "Person", "name": "Shahrukh Khan" }, { "id": "8133586f-ef81-4200-96e8-aff71858ade4", "type": "Person", "name": "B. Jayashree" }, { "id": "f9d186d9-5fb9-484b-93c7-274d0ca75eb7", "type": "Person", "name": "B. Jayashree" }, { "id": "b3927
22 2023-07-28
编程技术问答社区
数据列表： 如何隐藏查询值？
这个问题被编辑了，因为我发现与VUEJS无关，而与HTML数据师无关.我还以设置隐藏的数据级选项值. 世界上的任何选择器都有一个显示属性作为标签和查找值，可以将其与对象列表链接.到目前为止还可以.我需要隐藏我用户毫无意义的查找ID. 我选择列表的每个选项输入都显示了行.第一行是不应向用户展示的查找ID.第二行是预期的显示值(标签). 我需要一个选项来隐藏查找值！ 我什至可以找到选择列表的HTML，我假设是由浏览器生成的，而不是添加到DOM. . hlep !!! {{ option.name }}
14 2023-05-22
编程技术问答社区
从数据列表中选择项目时触发事件，而不是在打字时触发。
我有这样的形式: first second 用户可以从数据师-or-中选择一个项目，可以在其自己的值中输入.我通过JSON调用与PHP脚本连接到数据库，以填写表单其余部分中的其他信息.我希望当用户在列表输入中键入名称时(因此，当内容被模糊)或用户单击DataList的选项时触发. . Using $( ':input#list' ).on( 'change', function... the function is triggered when the input loses focus, but when an item from the data-list is selected it also waits 'till the input loses
8 2023-05-16
编程技术问答社区
如何在单击时清除数据师输入?
我在Litelement Web组件中有这个数据师: 如果我从列表中选择其中一个选项，然后再次单击输入字段，我看不到选项列表，而只能看到选定的选项列表.如果我想查看所有选项，我必须用键盘手动删除输入字段上写的选项. 即使选择了这些选项之一，它是否存在一种显示所有选项的方法? 或更高，它是否存在一种清除焦点或单击时清除输入字段的方法? 没有jQuery. 解决方案 创建onfocus和onc
26 2023-05-08
编程技术问答社区
Datalist有自由文本错误 "选择一个有效的选择。该选择不是可用的选择之一。"
我正在建立一个使用脆皮表格创建食谱表单，我正在尝试使用数据库输入字段，以供用户输入自己的成分，例如"大番茄"或从"番茄"或"诸如"番茄"或'鸡'.但是，无论我是输入新成分还是选择先前的成分，我都会遇到以下错误:"选择有效的选择.该选择不是可用的选择之一.".我如何解决此错误? 视觉: models.py class Recipe(models.Model): user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE) websiteURL = models.CharField(max_length=200, blank=True, null=True) image = models.ImageField(upload_to='image/', blank=True, null=True) name = models.CharField(max_l
20 2023-04-17
编程技术问答社区
输入列表选择改变事件
我有一个示例: 当用户选择选项(使用鼠标或键盘)时，我需要捕获事件. 我尝试做onchange="MySuperFunction();"，但是只有在选择项目时才起作用，然后列表没有重点. 解决方案 input事件应适合您的需求.据我了解，您不能直接使用数据师，但是它连接到list属性的输入.此事件绑定将在该输入上进行: document.getElementById('browsers-input').addEventListener('input', function (event) {
4 2023-03-10
编程技术问答社区
KnockoutJS-从一个输入的值链接到一个数据列表的值
我正在基于可观察的KO生成datalist选项. function Company(company) { this.id = company.Id; this.name = company.Name; this.state = company.State.name; } var self = this; self.companies = ko.observable(); $.get('...', {}, function(result) { ko.utils.arrayForEach(result, function(company) { self.companies.push(new Company(ko.toJS(company))); }); }); html:
6 2023-02-24
编程技术问答社区
如何使用Ajax和HTML结构来呼应自动完成选项？
我想创建一个自动填充搜索框.它得到了一个JSON，并将其发送到 s的HTML5 . 它可以正常工作，但不能在值中使用空间！因此，它只是返回第一个单词.例如，如果jresults.name是"放手" - 我只会得到"让我们". 这样做的最好方法是什么? 此部分:$( "#prod_name_list" ).children().remove();防止我从列表中选择选项.因为当我"键入"时，它会删除其中的所有内容，因此我需要其他解决方案. 第二部分是在提交我要获得对象的ID的表格之后. (jresults.id)，我不确定如何使用提交来检索它. 我的代码: JS部分: $("#prod_name").bind("keyup", function(e) { if (e.which = 48){ $( "#p
12 2023-02-12
编程技术问答社区
当建议者名单很大时，html5数据列表不会下拉。
我使用Datalist向特定的文本输入建议选择数据，但是当数据数据师的大小太大时(我还不知道正确的数字，但是很确定何时大小大于40会发生). 我使用数据师如下 这里显示何时大小不是"太大"，当单击"下箭头"按钮时，数据级可以下拉. 但是，当数据数据师"太大"(在此示例中，实际数字为42)，当单击"下箭头按钮"时，它不会下拉建议列表.
4 2023-02-11
编程技术问答社区
从datalist onhover获取当前值
我正在尝试获取数据库的盘旋元素的当前值.因此，如果我打开带有值的数据师，然后将鼠标移到它们上，我希望这些值出现在控制台中. 这是我的尝试: $("#browsers").on("mouseover", function() { console.log($(this).value()); }); 这是一个小提琴: https://jsfiddle.net/sshcvr5q/ 解决方案 我不确定这是可能的. Datali
12 2023-02-09
编程技术问答社区
动态HTML5数据列表
因此，我有一些问题，让我的HTML5数据库从JavaScript数组中动态填充，该javascript数组是从MySQL数据库中通过行填充的对象的键值填充的. ph！ mySQL数据库=>表=> rows => json => javascript对象=>" firstName"&" lastName" key => friend name => datalist options的数组. 我成功创建了名称数组: var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"]; //Example of my array 并设置一个循环以将其申请到数据师: for (var i = 0; i
6 2023-02-09
编程技术问答社区
如何获得数据列表的变化事件？
我正在使用数据师，需要检测用户何时从下拉列表中选择某些内容. 仅当用户从数据师中选择某些东西时，该事件才会发射.如果他们在输入中键入某些内容，那么我不希望该事件发射. (在我链接的问题的接受答案中，请注意他们绑定输入的问题，这不是我想要的).我尝试过(没有成功): Option 1 Here Option 2 Here $(document).on('change', 'datalist', function(){ alert('hi'); }); 编辑: 这个问题与建议的问题不同，因为这是一个完全不同的问题. 解决方案 您可以手动检查更改.但是您需要检查DataList的输入的更改. $(document).on('change', 'input', function() { var options = $('data
24 2023-02-08
编程技术问答社区
热门专题
virtualbox centos7虚拟机ping不通百度 java 初始化list model 对象 requests报ssl错误 python 列表 删除 spring jar包 同名 bean layer.photos(options) - 相册层 vmware15下载安装 .FastDFS需要安装的依赖包有哪些 kali 跑不起来,出现界面之后卡住了 crt 连接debian 32位oracle运行在64位 微信小程序授权登录前后端流程 miniui日期格式化 redhat 6.9 安装cmake memcached工具 表单没有设置display debian阿里源安装wps elementui el-table 如何修改表头颜色 .NET 基金会项目 支付宝当面付java utils