jQuery - 轻松授予selectbox自动完成功能的任何好方法
jQuery 实现 SelectBox 自动完成功能
基础概念
SelectBox 自动完成功能是指当用户在输入框中输入内容时，系统能够根据输入的部分字符自动匹配并显示可能的选项，帮助用户快速选择。这种功能在表单处理中非常实用，特别是当选项较多时。
实现方法
1. 使用 jQuery UI Autocomplete
jQuery UI 提供了一个强大的 Autocomplete 组件，可以轻松实现 SelectBox 的自动完成功能。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id="autocomplete-input" placeholder="输入国家名称...">
<select id="country-select" style="display:none;">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">日本</option>
<option value="4">英国</option>
<option value="5">法国</option>
</select>
<script>
$(function() {
// 从select元素获取数据
var countries = [];
$('#country-select option').each(function() {
countries.push({
label: $(this).text(),
value: $(this).val()
});
});
// 初始化自动完成
$('#autocomplete-input').autocomplete({
source: countries,
select: function(event, ui) {
// 当用户选择一个选项时，更新隐藏的select元素
$('#country-select').val(ui.item.value);
}
});
});
</script>
</body>
</html>2. 使用 Select2 插件
Select2 是一个功能更加强大的 jQuery 插件，专门用于增强 select 元素的功能。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<select id="country-select" style="width: 300px;">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">日本</option>
<option value="4">英国</option>
<option value="5">法国</option>
</select>
<script>
$(document).ready(function() {
$('#country-select').select2({
placeholder: "选择国家",
allowClear: true
});
});
</script>
</body>
</html>3. 使用 Chosen 插件
Chosen 是另一个轻量级的 jQuery 插件，用于增强 select 元素。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
</head>
<body>
<select id="country-select" data-placeholder="选择国家..." style="width: 300px;">
<option value=""></option>
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">日本</option>
<option value="4">英国</option>
<option value="5">法国</option>
</select>
<script>
$(document).ready(function() {
$('#country-select').chosen();
});
</script>
</body>
</html>优势比较
| 方法 | 优点 | 缺点 | |------|------|------| | jQuery UI Autocomplete | 轻量级，与jQuery UI其他组件集成好 | 需要额外处理与select元素的同步 | | Select2 | 功能强大，支持远程数据加载，主题丰富 | 文件体积较大 | | Chosen | 轻量级，简单易用 | 功能相对较少，不再积极维护 |
常见问题及解决方案
- 性能问题：当选项很多时（如超过1000个），自动完成可能会变慢。
- 解决方案：使用服务器端搜索（Select2支持远程数据源）或实现本地缓存。
- 移动设备兼容性问题：某些插件在移动设备上可能表现不佳。
- 解决方案：测试并选择移动友好的插件，或考虑使用原生HTML5解决方案。
- 样式冲突：插件样式可能与现有CSS冲突。
- 解决方案：自定义CSS或使用插件提供的主题系统。
- 动态加载选项：需要根据用户输入动态加载选项。
- 解决方案：使用Select2的AJAX功能或jQuery UI Autocomplete的远程数据源功能。
应用场景
- 国家/地区选择器
- 产品搜索和选择
- 标签输入
- 大型数据集的快速筛选
- 表单中的多选功能
以上方法都能很好地实现SelectBox的自动完成功能，选择哪种取决于项目需求、性能考虑和开发偏好。
相关·内容
大多数代码由巨大的表单组成，每个表单都有许多选择。填写整个表单非常麻烦，因为每个select都有太多可能的值，因此查找要查找的值需要花费很长时间。谢谢!
浏览 1提问于2011-03-09得票数 3
回答已采纳
我使用的是Serverfireteam LaravelPanel (它使用zofe/rapyd-laravel )。我为一个实体创建了一个crud控制器。此实体具有指向另一个表的外键。现在我想显示这个外键的自动完成，但它只显示一个空的选择框。我的控制器代码如下所示： $this->edit = \DataEdit(
浏览 1提问于2015-07-23得票数 5
4回答
Opera浏览器的JS代码似乎有问题，因为它只删除了在多选标记中选择的最后一个选项标记，有人能帮我吗？以下是用于此操作的HTML： <option value="[board]">
浏览 1提问于2010-06-12得票数 8
回答已采纳
我已经将Struts 2 jquery自动完成标记forceValidOption设置为false，如下所示： forceValidOption="false"/>
forceValidOption不起作用，它迫使用户从选项中进行选择，并在用户离开输入时自动清除用户输入的数据生成<
浏览 3提问于2015-01-04得票数 2
回答已采纳
console.log(this); $(this).css("display", "none");});
它在最新版本的Chrome在Mac上，Firefox是唯一可以正常工作的。我还尝试使用"display“、"none”、"!important"，将.css更改为.style或.attr -相同的结果。
浏览 0提问于2013-07-19得票数 0
回答已采纳
我有一个这样的脚本：(但它不工作)当用户关注父级为div#selectbox的select时，我想要更改div的box-shadow，有什么建议吗？这是我正在做的事情的jsFiddle。
浏览 5提问于2011-12-25得票数 0
回答已采纳
我们有一个标准的帐单形式在我们的网络应用程序。我正在使用JQuery 来根据客户端的请求来调整输入，不幸的是，这会导致浏览器忽略state下拉列表，当它对用户地址进行auto_fills_时。在大多数情况下，插件隐藏<select>输入，然后在相当下拉的版本中来回传递值更改。原始隐藏输入或下拉列表都不会提取状态auto_fill_。我一关掉selectBox，它就又起作用了。-- End injection -->
</div>
浏览 3提问于2011-09-13得票数 0
我正在为django 2.2重写一些管理接口，目前使用django autocomplete_fields管理功能。这些ProductAdmin持有者中的每一个只包含实际产品类的ForeignKey，还有一些其他属性。现在我想知道: django在哪里存储有自动完成字段选择的id - ForeignKey - of项？它不会将selectbox中的选项标记为selectbox，而且尽管页面上存在带有#cashregisterprodu
浏览 5提问于2021-09-01得票数 1
回答已采纳
对于这个问题，我曾经有一个简单的解决方案:打开developer工具控制台，开始输入一个或几个字母…。而bam，chrome将自动完成window中可用的任何变量名(或者调试时在this对象中)。我主要是用这个来查看是否定义了类似于jQuery的东西。
最近，Chrome的控制台有了一个新的自动完成功能，可以自动完成以前类型的语
浏览 2提问于2016-04-13得票数 1
回答已采纳
我正在使用jQuery和一个名为jQuery.SelectBox的插件你可以在这里看到问题： (向下向右滚动)，有三个选择框。
浏览 1提问于2009-09-14得票数 1
回答已采纳
我正在寻找一个好的Jquery插件，可以处理查找一个城市所属的国家(在类型与自动完成)Typing "New Yor"New York, United States:country
什么是实现这种功能的好方法？我的意思是在用户数据库中存储所有国家和城市的更多。我
浏览 0提问于2012-01-30得票数 6
回答已采纳
1回答
我已经创建了一个包含两个selectbox元素的简单表单。我还有一个按钮，可以根据用户的判断动态添加这些选择框。选择框选项会很长，所以我使用了jQuery选择的插件以使其更有用。在使用jQuery克隆动态添加新元素之前，一切都很正常。我无法在我的新元素选择框中选择任何选项，而且它们也带有先前的结果。在搜索论坛时，其他人在选择后选择了“重置”，方法是调用：$("#form_field").trigg
浏览 2提问于2013-01-26得票数 0
回答已采纳
3回答
我做了我的家庭作业，检查了很多问题，但仍然找不到我可以去工作的东西。$("#example").click(function() {
浏览 0提问于2011-09-15得票数 8
回答已采纳
15回答
从选择框中删除项目
、、、
我正在运行jQuery，这应该会让任务变得更容易。下面是一个示例选择框。<select name="selectBox" id="selectBox"> <option value
浏览 10提问于2008-12-17得票数 272
回答已采纳
我使用jquery自动完成作为我的搜索栏。但是，我注意到，每当我输入某些内容并单击enter而不选择自动完成功能所提供的任何选项时，自动完成下拉单词仍然存在。当我单击搜索栏的“提交”按钮时，是否有一种方法可以自动关闭自动完成下拉列表？
浏览 2提问于2013-09-11得票数 0
回答已采纳
2回答
JQuery自动完成
、、、、
我的目的是使JQuery自动完成功能与我的web应用程序工作，该应用程序是用Servlets和jsp开发的。到JQuery自动完成的原始链接在这里- index.jsp
<%@taglib prefix="c" uri= "http://java.sun.com/jsp/jstl/
浏览 5提问于2015-07-16得票数 0
回答已采纳
5回答
有没有一种方法可以在PHP/jQuery中设置自动完成功能，使其可以快速遍历数据库中的数千行？有没有一种好方法，既能让查询速度更快，又能在可用选项少于10个的情况下才返回结果？
提前谢谢你，沃克
浏览 5提问于2010-06-24得票数 7
回答已采纳
我读过几篇文章/问题/论坛，讨论jQuery最好的自动完成插件。在尝试了几个好的之后，我意识到了大多数的缺点。
如果您正在查找国家并键入“In”，则会有几个国家出现。如果您继续输入India，这会导致5个AJAX调用(请参阅)印度是In的子集，那么为什么还要再调用呢？我们需要简单地过滤检索到的列表客户端。有人知道这样的实现吗？Jquery自动完成</
浏览 3提问于2010-04-28得票数 7
回答已采纳
此功能在Azure中不存在。在Azure中是否有任何方法可以轻松地做到这一点，或者我是否需要依赖自动化脚本/ powershell脚本来完成这个任务？我想要完成的任务是将一堆SQL视图导出到CSV，并将它们发送到远程FTP服务器。
浏览 0提问于2020-02-14得票数 0
回答已采纳
2回答
好的，首先是一些背景。我正忙着自动化我们的构建过程。我们运行了Vs 2005和VS 2008的混合版本，目标都是平台2.0。我们使用Nant来完成我们的构建，使用MSBUILD任务来完成编译，使用Cruise Control .net来完成我们的CI。目前，我们将所有警告视为错误，如果任何FxCop规则失败(除我们禁用的一个小子集之外)，则失败构建，如果Simian检测到所有项目中
浏览 9提问于2008-11-11得票数 2
云服务器
ICP备案
云直播
即时通信 IM
实时音视频
腾讯云开发者
