时间戳

首页 > 解决方案 > 如何在自动完成 jquery 中过滤 JSON 数组并在 JavaScript 中显示动态值？

javascript - 如何在自动完成 jquery 中过滤 JSON 数组并在 JavaScript 中显示动态值？

问题描述

我已经在我的 HTML 输入字段中成功实现了 jQuery 自动完成功能，它返回一个 JSON 对象数组，我想要实现如下：

  1. 单击下拉列表中的一项
  2. 过滤此类项目的字符串以仅获取objID字符串。

所以，这是我的js代码：

$.ajax({
   url: "<?php echo $pointerClass ?>.json",
   type: "POST",
   dataType: "JSON"
   }).done(function(data){
      var jsonData = data;
      var arr = new Array();

      var keys = Object.keys(jsonData);
      for(var i=0; i<keys.length; i++){
         var key = keys[i];
         var jString = JSON.stringify(jsonData[key]);
         arr.push(jString);
      }// ./ for
      console.log('arr: ' + arr[0]);

      // autocomplete jquery function
      $( "#ar-type-pointer-objID" ).autocomplete({
         source: arr,
         minLength: 1
      });
    });

这是我的下拉菜单的屏幕截图：

在此处输入图像描述

正如您在红框中看到的那样，我需要单击一个项目并仅将"objID"值传递给我的输入字段，所以这是"qO19zg8mV4"因为我单击了红色方块中的行。

这是单击下拉列表行后我的输入应该是什么样子：

在此处输入图像描述

标签： javascriptjqueryarraysjson

解决方案

根据自动完成文档，您有两个有趣的事件：选择和关闭。

选择是

当从菜单中选择一个项目时触发。默认操作是将文本字段的值替换为所选项目的值

关闭是：

隐藏菜单时触发。并非每个关闭事件都会伴随着更改事件。

Select 有两个参数：

  1. 事件
  2. 用户界面

ui 是这样的对象：

item: {
  label: string,
  value: string
}

不知道你会从哪里得到你的 JSON，可能是价值，所以我假设......做一个 console.log 来确定它！

你应该用类似的东西重写

$( "#ar-type-pointer-objID" ).autocomplete({
  source: arr,
  select: function(event, ui) {
    const target = event.target;
    const val = JSON.parse(ui.item.value); // Check if decode is needed or is already passed as an object
    jQuery(target).val(val.ObjID);
    event.preventDefault();
    return false;
  }
});

我们阻止默认设置，因为“默认操作是将文本字段的值替换为所选项目的值”。并且您在输入字段中的更改将丢失。您仍然需要自己管理一些信息，但这个想法应该足够了！

推荐阅读