Jquery 或 Javascript：从 JSON 自动完成多个表单字段答案

【问题标题】：Jquery or Javascript: Autocomplete from JSON for Multiple Form FieldsJquery 或 Javascript：从 JSON 自动完成多个表单字段
【发布时间】：2023-03-23 09:08:01
【问题描述】：

我有一个输入文本字段名称为“Building_N”的表单；该表单还有几个隐藏字段，需要从外部 JSON 文件中填充。目前，该文件是一个文本文件，其数据如下：

[
  {
   "buildingname":"building1",
   "floorplanlayer":"floorurl",
   "roomlayer": "roomurl",

  },
  {
   "buildingname":"building1",
   "floorplanlayer":"floorurl",
   "roomlayer": "roomurl",
 }
]

我想使用 JQUERY 或 javascript 来允许用户选择“buildingname”值，如果他们选择了该值，则使用“floorplanlayer”和“roomlayer”值填充隐藏字段。

我还没有找到任何可以让我这样做的例子。我最接近的是使用 Onkeyup 事件加载 JSON 数据，然后通过正则表达式进行匹配，但这并没有为用户提供选择选项，并且还通过第一个字符匹配来选择。

谢谢！

【问题讨论】：

标签： jquery autocomplete hidden-field

【解决方案1】：

看看这个流行的自动完成库：https://github.com/devbridge/jQuery-Autocomplete

它比传统的 jQuery UI 的自动完成功能更强大。这就是我使用库提供的 API 逐步解决问题的方式：

将 JSON 文件解析为 JavaScript 对象。
构建一个包含所有 buildingname 值的数组。
在您的自动完成选项中，将 lookup 属性设置为您构建的数组。
将onSelect 属性设置为一个回调函数，该函数查找与他们选择的buildingname 相关的对象，并在此处设置您的隐藏字段。

这应该使您尝试完成的工作比自己处理自动完成要容易得多。

【讨论】：

谢谢。会看看。但是这个：stackoverflow.com/questions/23828006/… 应该对我有用，但不是。
您具体遇到了什么问题？
没关系；每jensbits.com/2011/08/24/… jQuery 需要一个“标签”，而我没有使用它。因此，根据上面的 stackflow.com 链接，我的自动完成功能开始工作，但它与其他表单输入字段重叠——z 顺序问题。
我修复了 z 索引；将发布我的代码以显示几乎可以正常工作，除非它返回所有值

【解决方案2】：

这是我如何让它工作的；请注意，自动完成返回所有值，因为到目前为止，我无法找到一种方法来让 JSON 数据仅匹配起始词。但我想这将是另一个问题：

        $("#Building_N").autocomplete({
                 open: function(){
                 setTimeout(function () {
                       $('.ui-autocomplete').css('z-index', 99999999999999);
                 }, 0);
                },
                source: function( request, response ) {
                $.ajax({
                    url: "_buildingdata.txt",
                    dataType: "json",
                    data: {term: request.term},
                    success: function(data) {
                                response($.map(data, function(item) {
                                return {
                                    label: item.buildingname,
                                    value: item.buildingname,
                                    hidroom: item.roomlayer,
                                    hidfloor: item.floorplanlayer

                                    };
                            }));//response
                        }//success
                    });//ajax
                },//source
                minLength: 3,
                select: function(event, ui) {
                    console.dir(ui);
                    $('#Building_N').val(ui.item.buildingname);
                    $('#hid_roomdata_layer').val(ui.item.hidroom);
                    $('#hid_floorplan_layer').val(ui.item.hidfloor);
                }
         });

【讨论】：