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

Question

我已经在我的HTML输入字段中成功实现了jQuery Autocomplete函数，它返回了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" 。

单击下拉列表行后，输入内容如下所示：

Answer 1

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

选择是

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

接近是：

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

Select具有两个参数：

1. 事件
2. UI

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;
  }
});

我们避免使用默认值，因为“默认操作是将文本字段的值替换为所选项目的值。” 并且您在输入字段中所做的更改将丢失。 您仍然必须自己管理一些信息，但是这个主意应该足够了！