如何在自動完成的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;
  }
});

我們避免使用默認值，因為“默認操作是將文本字段的值替換為所選項目的值。” 並且您在輸入字段中所做的更改將丟失。 您仍然必須自己管理一些信息，但是這個主意應該足夠了！