自动完成选择名称和插入id到隐藏输入
是一种前端开发技术，用于实现在输入框中输入关键词时，自动弹出匹配的选项供用户选择，并将选中的选项的名称显示在输入框中，同时将选项的唯一标识（ID）插入到隐藏的输入框中。
这种技术常用于表单中的关联字段，例如选择城市时，根据用户输入的关键词自动匹配城市名称，并将选中的城市名称显示在输入框中，同时将城市的唯一标识（如城市ID）插入到隐藏的输入框中，以便后台处理。
优势：
- 提升用户体验：自动完成选择名称和插入ID可以减少用户的输入工作量，提供更快速、便捷的选择体验。
- 减少错误：通过自动匹配选项，可以减少用户输入错误的可能性，提高数据的准确性。
- 提高效率：自动完成选择可以快速定位到用户需要的选项，节省用户的时间和精力。
应用场景：
- 地址选择：在电商网站的收货地址填写中，根据用户输入的关键词自动匹配城市、区县等地址信息。
- 标签选择：在文章编辑或标签管理中，根据用户输入的关键词自动匹配已有的标签，并将选中的标签名称显示在输入框中。
- 用户选择：在用户管理系统中，根据用户输入的关键词自动匹配已有的用户，并将选中的用户名称显示在输入框中。
推荐的腾讯云相关产品： 腾讯云提供了一系列与前端开发相关的产品和服务，以下是其中几个推荐的产品：
- 腾讯云COS（对象存储）：用于存储和管理前端开发中的静态资源，如图片、音视频等。产品介绍链接：https://cloud.tencent.com/product/cos
- 腾讯云CDN（内容分发网络）：用于加速前端资源的传输，提高用户访问速度和体验。产品介绍链接：https://cloud.tencent.com/product/cdn
- 腾讯云API网关：用于构建和管理前端开发中的API接口，提供灵活的API管理和调用功能。产品介绍链接：https://cloud.tencent.com/product/apigateway
以上是对自动完成选择名称和插入ID到隐藏输入的问答内容的完善和全面的答案。
相关·内容
1回答
我知道有很多与这个主题相关的答案，但是我尝试了一天来解决我的问题，但我不能，可能是因为我不熟悉JQuery和自动完成窗口小部件。这是我使用的代码，它工作得很好。问题是，它插入的是名字而不是id。').val(ui.item.value); }); <label for="user">User: </lab
浏览 10提问于2019-05-13得票数 0
回答已采纳
我正在建立一个本地网站，在一种形式，我有一个电话号码输入和密码输入。Chrome是预先填充这些字段，电话号码与我的电子邮件地址，密码字段与密码，如图所示。我试图禁用铬自动完成的东西，所有这些都没有效果从一开始就清除浏览器历史记录中的
浏览 5提问于2017-02-15得票数 0
如何使用自动完成功能处理多个项目的选择？我从JSON web服务返回的对象包含一个ID和一个标签- ID是数据库中实体的ID，标签是为用户显示的一些文本。此时，当我在autocomplete下拉列表中选择一项时，该项ID的值存储在隐藏字段中，并显示标签。当我删除标签时，我清除了隐藏字段的ID -这是通过向处理此问题的DOM添加一个锚元素来完成的。现在，我想要有多个
浏览 4提问于2010-07-27得票数 0
回答已采纳
以下是我前两个问题的内容：
我的表单中有一个jQuery UI 1.8自动完成框，在大多数情况下，它的工作原理就像一种魅力。我遇到的一个问题是，如果我输入了一个有效的名称，但是没有选择出现的选项，那么名称永远不会与我的{name,value}列表相匹配，因此没有为包含' value‘部分的隐藏输入设置正确的值。当然，这会导致混乱的情况，您可以输入一个您知道是正确的名称，点击submit，然后被告知您没有
浏览 0提问于2010-07-23得票数 4
回答已采纳
1回答
我想添加一个带有jquery的自动完成字段。我有一个带有值和标签的对象列表，并且我希望当用户选择一个项时，这个值会出现在一个隐藏字段中，并且标签在自动完成字段中。但是文档中说，“当用户选择一个项目时，这个值将被插入到输入元素中”。
这种行为能改变吗？我认为如果标签是显示的，而不是值本身，那么它对用户更友好。
浏览 1提问于2016-04-08得票数 0
回答已采纳
我有一个自动完成的州和省名称运行。我想将状态缩写传递给下一级联的Autocomplete。我创建了一个隐藏输入，当选择州名称时，我想将其设置为缩写，然后我将选择用于下一层自动完成的缩写，以将城市查询限制为只有一个州。我已经尝试了几件事，做了很多谷歌搜索和阅读jQuery书籍，但我需要一些帮助。stateProvince输入框会自动完成</
浏览 1提问于2011-04-21得票数 1
1回答
所以，我有一个表单，我想要更新一些记录，所有字段都正常工作，但是FK (也就是id_colaborador)对于id_colaborador的输入，我有以下内容：
<div class="control-group <?empty($id</e
浏览 0提问于2018-12-03得票数 0
回答已采纳
我想要三张桌子：
我希望在一个事务中完成所有的事情，以确保只有当所有表中的一切都正常时，数据才会被插入到表中。要将任何东西插入到book_author中，我需要id，但我没
浏览 3提问于2013-01-16得票数 0
2回答
我在一些表单上使用jquery自动完成插件，用户可以在其中输入一些数据。通常，数据在标准ID-名称对中表示。该名称通过自动完成查找，并在选择时，我将相应的ID写入隐藏的表单字段，以便稍后在后端处理。我已经处理了自动完成上的选择和更改事件，以将选定的ID写入隐藏字段，并在没有找到匹配的情况下将其
浏览 0提问于2011-10-13得票数 0
回答已采纳
2回答
在用户从autocomplete字段中选择一个值之后，我想要将这个vaules填充到一个隐藏的字段中，这样就可以将它传递给PHP并插入到数据库中。以下是我正在努力完成的任务的细目：我在找但什么也没找到。
浏览 0提问于2010-01-14得票数 2
1回答
它将其用于所有日期，例如created_at和updated_at。现在这里的问题是，datetimepicker插件使用momentjs来自动显示用户本地时区的输入日期。
因此，我正在尝试想出一个解决方案，将他们输入的日期插入为UTC。最大的障碍是，我希望它仍然显示他们当前时区的输入日期，然后在数据库插入之前转换它。我在想，我可以有一个隐藏的输入字段，它将使用momentjs自动填充其时区名称，然
浏览 47提问于2017-07-09得票数 0
回答已采纳
使用jQueryUI自动完成-我返回一个“代理”的列表连同他们的ID，我的控制器返回正确的JSON例如： @Html.ValidationMessageFor(model => model.tvID)自动<
浏览 6提问于2013-02-28得票数 0
回答已采纳
2回答
上下文:我正在使用jQuery的自动完成插件来触发它下面的显示/隐藏元素。问题：事件只在输入框中键入文本时触发，而不是在从自动完成列表中选择标记时触发。这是我的密码： <br> S
浏览 2提问于2016-10-07得票数 1
回答已采纳
我已经构建了一个具有自动完成控制的表单。在自动完成中选择条目后，将使用("#fieldName").val()方法设置两个隐藏字段的值，如下所示当表单发布时，隐藏字段的值不在模型中在自动完成字段中输入的值是。尽管当我手动在textbox中
浏览 1提问于2015-09-27得票数 0
回答已采纳
我一直在试验谷歌的地方自动完成在一个形式中使用，但不知道如何让邮政编码/postcode显示在自动完成下拉或选定的输入值。返回的autocomplete值包含web代码，因此我可以提取它并将其插入到适当的表单输入中，但它不会显示web访问者何时输入他们的数据。目标是有一个非常简单的形式，姓名，地址，电话，电子邮件和所有特定的地址输入隐藏(州，城市，街道，邮编等)。我发现，
浏览 3提问于2014-01-24得票数 8
我正在寻找一个更好的自动完成功能/处理或一种方式编码特定的数据从源视图。,$row['companyname']);然后，我使用位于这里的jquery自动完成函数( )。"#customername" ).autocomplete({ });</script>
它通过自动完成输入框来正确工作
浏览 1提问于2014-11-06得票数 0
1回答
我在我的表单中使用了自动完成jquery插件。在这种情况下，当我搜索姓名时，自动完成功能会在选择要列出的姓名时显示姓名列表，并在输入字段中显示姓名。我想要onselection，当我选择名字时，它会在输入field.Please中显示名字的id，让我知道该怎么做，或者任何jquery插件？
谢谢
浏览 0提问于2012-01-16得票数 0
1回答
关于如何自动完成一些输入和相关的表单小部件，有很多文章。其目标是自动完成来自数据库(通过json )的数据的用户输入，但只将id从数据库发送回服务器。有两种用法：自古以来，jquery自动完成已经被使用，它正在工作，但由
浏览 3提问于2021-02-05得票数 0
回答已采纳
1回答
我正在为我的大学制作一个工具，允许学生通过以下操作创建一个班级列表：
将该课程添加到一个单独的表单中，该表单在提交时创建一个课程列表。我试图用“添加到课程列表”按钮链接“自动完成”和“课程列表”表单，该按钮将一个隐藏的输入字段插入到课程列表表单中，该表单随后可以通过“创建课程列表”按钮提交。我的问题是:如何在不使用AJAX的情况下获取自动<em
浏览 3提问于2010-04-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
