更改自動完成 function 以顯示為下拉列表

Question

我有一個必須在下拉列表中顯示國家/地區狀態的表單，因為已經添加了自動完成功能，所以我在“console.log（數據）”中以數組形式獲得響應，但僅當我搜索 state 時，我我無法將自動完成更改為選擇列表，我確實嘗試通過將 jquery 自動完成更改為使用 select2、selectmenu 或更改，但這僅適用於自動完成。 我根本不需要自動完成搜索，只需要從數據中列出國家/地區的下拉列表。 下面是我使用 ajax 帖子使用 php 文件中的 api 調用獲取響應的代碼。 如何在選擇列表中獲取國家/地區列表並在選擇時觸發事件，我是該領域的新手。

我關注的一些消息來源，

• jQuery 自動完成 + ajax API 調用僅觸發空格鍵/向下箭頭上的列表？

• jQuery 自動完成，將成功數據傳遞給 select 方法

• html -

  <select id = "country_state"></select>

• jquery -

    ('#country_state').autocomplete({
    source: function(request, response) {
      Request.AbortAll();
      $.ajax({
          type: "POST",
          minLength: 3,
          url: base_path + "countrystatelist.php",
          dataType: "json",
          data: {
            q: request.term
          },
          beforeSend: function (jqXHR, settings) {
            Request.List.push(jqXHR);
            
        },
          success: function(data) {
            response(data);
            console.log(data);
          }
        });
    },
    select: function(event, ui) {
      $('#country_state').attr('country_state-id', ui.item.id);
    }
    });

• php -

    public function AllState() {
    $results = [];   
    $Country_states_info = CountryState::GetAllStates(); /* from api */
    foreach ($Country_states_info as $country_state) {
      if (!isset($country_state['name'])) {
        continue;
      }
        $results[] = [
          'value' => $country_state_name,
          'label' => $country_state_name,
          'id' => $country_state['id'],
        ];
         }
    return new JsonResponse($results);
  }

使用選擇2

jQuery('#country_state').select2({

   source: function(request, response) {
        Request.AbortAll();
        jQuery.ajax({
            type: "POST",
            minLength: 3,
            url: base_path + "countrylist.php",
            dataType: "json",
            data: {
              q: request.term
            },
            beforeSend: function (jqXHR, settings) {
              Request.List.push(jqXHR);
               
          },
            success: function(data) {
                 // response(data);
            
                return {
                    results: data.items
                  };
            
  
              console.log(data);
            }

            
          });
      },

      select: function(event, ui) {
        $('#country_state').attr('country_state-id', ui.item.id);
        }
    
        });

Answer 1

建議對您的 PHP 進行以下更新。

public function AllState() {
  $results = [];   
  $Country_states_info = CountryState::GetAllStates(); /* from api */
  foreach ($Country_states_info as $country_state) {
    if (!isset($country_state['name'])) {
      continue;
    }
    array_push($results, [
      'value' => $country_state['name'],
      'label' => $country_state['name'],
      'id' => $country_state['id'],
    ]);
  }
  return new JsonResponse($results);
}

我沒有看到$country_state_name是在哪里定義的。 我懷疑你的意思是$country_state['name'] 。