创建可搜索的组合框以替换没有帮助器列的数据验证
基础概念
可搜索的组合框（Searchable ComboBox）是一种用户界面控件，它结合了文本输入框和列表框的功能。用户可以在文本输入框中输入文本，控件会实时过滤并显示与输入文本匹配的列表项。这种控件通常用于数据验证，确保用户只能从预定义的选项中选择。
优势
- 提高用户体验：用户可以通过搜索快速找到所需的选项，而不必手动浏览整个列表。
- 减少错误输入：通过限制用户只能选择预定义的选项，可以减少输入错误。
- 灵活性：可以根据需要动态加载和更新选项列表。
类型
- 静态组合框：选项列表在初始化时加载，不会动态更新。
- 动态组合框：选项列表可以根据用户的输入或其他事件动态加载和更新。
应用场景
- 表单验证：在表单中，确保用户只能从预定义的选项中选择。
- 搜索和过滤：在数据密集型应用中，帮助用户快速找到所需的信息。
- 配置管理：在系统配置中，提供一组预定义的配置选项。
实现方法
以下是一个使用HTML和JavaScript实现可搜索组合框的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Searchable ComboBox</title>
<style>
.combobox-container {
position: relative;
display: inline-block;
}
.combobox-input {
width: 200px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.combobox-options {
position: absolute;
width: 100%;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 4px 4px;
display: none;
}
.combobox-options div {
padding: 8px;
cursor: pointer;
}
.combobox-options div:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="combobox-container">
<input type="text" class="combobox-input" placeholder="Select an option">
<div class="combobox-options">
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
<div>Option 4</div>
</div>
</div>
<script>
const input = document.querySelector('.combobox-input');
const optionsContainer = document.querySelector('.combobox-options');
const options = optionsContainer.querySelectorAll('div');
input.addEventListener('input', () => {
const searchText = input.value.toLowerCase();
options.forEach(option => {
const optionText = option.textContent.toLowerCase();
if (optionText.includes(searchText)) {
option.style.display = 'block';
} else {
option.style.display = 'none';
}
});
});
input.addEventListener('focus', () => {
optionsContainer.style.display = 'block';
});
input.addEventListener('blur', () => {
setTimeout(() => {
optionsContainer.style.display = 'none';
}, 200);
});
options.forEach(option => {
option.addEventListener('click', () => {
input.value = option.textContent;
optionsContainer.style.display = 'none';
});
});
</script>
</body>
</html>参考链接
常见问题及解决方法
- 选项列表不显示：
- 确保CSS样式正确，特别是
.combobox-options的display属性。 - 检查JavaScript事件监听器是否正确绑定。
- 确保CSS样式正确，特别是
- 搜索功能不工作：
- 确保
input事件监听器正确绑定到输入框。 - 检查搜索逻辑是否正确实现，确保选项文本与搜索文本进行比较。
- 确保
- 选项点击无反应：
- 确保每个选项都有点击事件监听器。
- 检查点击事件处理函数是否正确实现，确保输入框的值更新为选中的选项文本。
通过以上方法，你可以创建一个功能齐全的可搜索组合框，替换没有帮助器列的数据验证。
相关·内容
1回答
我正在构建一个用于人员配备的电子表格。包含它的工作簿由2个工作表组成。一个是有问题的，另一个是针对各种不同站点的验证列表。目前没有一个是相互依赖的。有问题的两个列表是针对团队成员和角色的。它们都位于单独的结构化表格中，并且都包含在双重命名范围中。第一个直接引用表列，第二个引用第一个，使其成为对表的间接引用。 我的目标是在不使用帮助列的</
浏览 40提问于2021-02-25得票数 2
回答已采纳
我如何验证DOJO selectOneMenu (required="true")这里是一些虚拟代码。
浏览 2提问于2012-11-08得票数 0
回答已采纳
我可以通过普通的VB6方法在数据库中输入数据(我将用一行代码解释)但是我想添加或编辑数据库中的数据，如 B Y 2 3 1现在我希望ComboBox1包含来自列名的数据Combobox2包含来自<e
浏览 0提问于2013-12-27得票数 1
我有一个带有组合框的Excel文件(name = "Combobox1")。运行脚本(基本上是粘贴列的“下一行”中选定的值)之后，我希望在脚本末尾的组合框上重新设置焦点，这样就可以在组合框中键入下一个条目，而不必首先单击combobox文本字段。这是Excel 2013中的工作，但我希望它在2007年也能运行：有人知道吗？或者:我可以用单元
浏览 2提问于2014-12-06得票数 1
2回答
我需要一些帮助，使数据验证列表更容易搜索/使用。我的数据验证列表中有大约600个供应商名称，这使得必须向下滚动才能按字母顺序找到正确的供应商名称变得非常繁琐。有什么方法可以让列表可搜索吗？此外，如果可能的话，它需要在每个单独的单元格中都是可搜索的，因为几乎每天都会添加一个新记录，其中包含供应商名称(从下拉列表中选择)和一些其他信息。我尝
浏览 2提问于2016-06-30得票数 1
我想重新创建gmail to: type字段，但用于将数据输入到电子表格中。因此，如果一个人开始输入电子邮件地址，它将查看他们的联系人(和域联系人)，并显示一组过滤后的电子邮件。
浏览 1提问于2014-03-26得票数 0
我已经创建了一个Excel工作表(名为“users”)，在A列中有一个随机名称列表。该列中的每个单元格都链接到一个数据验证单元格。如果作为搜索结果返回1，则将该名称合并为动态列表(列D)的一部分，该列表依次显示在数据验证单元格中。这可以在下面看到，我输入了字符'A‘，并返回了一个全部以该字符开头的名称列表。
列中的</e
浏览 0提问于2018-04-29得票数 0
我有一个标签形式的组合框，用来查找基于AccountName的记录，有230个名字，让我困惑的是它的名字以字母O开头。我花了几个小时在网上寻找甚至开始尝试修复它我是新手访问，并希望它没有VBA的工作。我删除了组合框，并尝试使用向导重新创建它，但每次都是一样的。
如果我将2列添加到组合框中，它确实可以工作，但我不
浏览 1提问于2021-01-21得票数 0
1回答
因此，我试图为我的公司在powerapps中做一个表单，我需要在其中有2个用户组合框，以搜索员工和主管。当用户使用：Office365Users.SearchUser({searchTerm:'Primary User'.SearchText,top:10})选择第一个选项时 他们得到了整个用户列表，但在我的第二个组合框中，当他们开始在那里键入(使用与上面相同的行)时，它只给出第一个用户的结果，而
浏览 79提问于2021-10-06得票数 0
1回答
在c#中搜索多列列表视图中的项目
、、、、
实际上我是在C#中创建一个播放列表视图，表单包含一个包含4列“名称”、“专辑”、“艺术家”和“路径”的ListView。我在表单中也有一个文本框。我想知道如何搜索与用户的搜索查询匹配的项目，并从所有列中找到可能的匹配结果。例如，如果用户键入path，那么我如何从path中获取匹配值，如果path包含歌曲名称，那么？实际上，如果你使用过任何带有播放列表的播放器，比如Windows M
浏览 6提问于2013-08-06得票数 0
我有一个Access数据库，用于将基本信息存储在表中，比如名字和姓氏。我将如何通过姓氏来添加查找功能？FROM tblPatient我现在该怎么把这个和我的身体联系起来呢
浏览 0提问于2009-11-28得票数 0
在使用本地商店时，将queryMode:设置为local的用途是什么？在下面的Fiddle中，如果我将queryMode设置为remote，则不会产生任何差异。我漏掉了什么吗？
浏览 4提问于2015-05-20得票数 0
回答已采纳
1回答
可搜索动态组合框WPF
、、、
我正在尝试创建一个可搜索的组合框，其中下拉项(在ObservableCollection中)将更新为用户文本。因此，当用户搜索特定城市时，将更新observable集合以显示相关的搜索词，并更新数据绑定组合框。
当search = "“时，从API返回前100个城市(以A开头的城市)。目前，我有以下代码用于在搜
浏览 0提问于2021-01-31得票数 0
我只想根据一些条件限制组合框中的记录，比如哪个菜单项打开了表单。因此，应该返回特定的行。
我对代码一无所知，也告诉我要使用哪个方法/事件，字段的修改方法，控件的查找？还是在数据源？表单还是类？
浏览 2提问于2011-08-02得票数 0
经过大量的搜寻，我来这里寻求帮助。在我的C# winform应用程序中，我想创建一个dataGridview，以便在用户在数据库中执行搜索之后，在用户单击行后加载很少的记录，它应该显示文本框中的所有记录。我有20多个文本框，很少有组合框和日期选择器，但我只想在dataGridView中显示几个列。我知道如何将数据加载到表格加载或
浏览 0提问于2017-02-24得票数 0
回答已采纳
2回答
activeX组合框
、、、
我有一个复杂的工作簿，其中有许多ActiveX组合框，我选择这些组合框而不是表单控件来实现自定义选项。令人费解的是，今天早上所有的盒子都停止工作了。从字面上看，前一分钟他们还在工作，然后完全停止了。我不是在写那张纸，而是一张不同的纸。没有附加到组合框的代码。在设计模式下，属性框甚至不会出现。Developer>Properties仅打开工作表属性。我删除了组合</em
浏览 31提问于2017-02-06得票数 0
1回答
同时用reconfigure: true加载数据我们希望用户能够为每个组合框选择定制网格的外观。每当组合框值发生变化时，我们就用reconfigure: true加载网格，以引入不同的列。但是，我们不知道如何为这些列保存状态。状态保存在一个数据库中，该数据库的stateI
浏览 2提问于2014-07-22得票数 3
我希望创建dynamic dropdown，这意味着第二个dropdown的值随着第一个dropdown上选择的更改而变化。我浏览了Dojo文档，似乎有3种不同的小部件可供我使用，
现在我很困惑，我应该使用哪一个来创建动态DropDowns？
浏览 0提问于2012-10-27得票数 1
回答已采纳
我已经获得了带有关系和搜索的模型类Contactindiv，如下所示。true);
'criteria'=>$criteria,}
当前页面以可搜索的CGridView格式显示数据。我的目标是将来自关系的“联系人日志”组合到模型中，以便在GridView中<e
浏览 0提问于2013-03-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
