javascript - 如何在自动完成 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" 因为我点击了红色方 block 中的行。

这是单击下拉列表行后我的输入应如下所示:

Answer 1

根据autocomplete文档中，您有两个有趣的事件:选择和关闭。

选择的是

Triggered when an item is selected from the menu. The default action is to replace the text field's value with the value of the selected item

关闭是:

Triggered when the menu is hidden. Not every close event will be accompanied by a change event.

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

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