更改自动完成 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'] 。