使用 ajax 和 jquery 的 api 调用初始化 Materialize-autocomplete 数据集答案

【问题标题】：initialization Materialize-autocomplete dataset using api call with ajax and jquery使用 ajax 和 jquery 的 api 调用初始化 Materialize-autocomplete 数据集
【发布时间】：2021-07-21 09:15:34
【问题描述】：

大家早上好，我在 PHP 应用程序中使用 materialize.css

我想通过 API 调用初始化自动完成数据。

.autocomplete ()用JSON数组" data ":初始化数据，

我通过.ajax ({..., url: '/search.php', ... datas}) 得到的。

但我无法将datas 注入.autocomplete ()，

我该怎么做？

这里是源代码：

<body>
  <form action="">
    <div class="row">
      <div class="col s12">
        <div class="row">
          <div class="input-field col s6">
            <i class="material-icons prefix">title</i>
            <input id="searchOnAPI" name="name" type="text" class="autocomplete" value="{{ item.name }} ">
            <label for="searchOnAPI">{{ siteData('admin.titre') }}</label>
            <ul id="autocomplete-content" class="autocomplete-content"><li><a></a></li></ul>
          </div>
        </div>
      </div>
    </div>
  </form>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script>
    $(document).ready(function () {
      $('#searchOnAPI').keyup(function () {
        $('#autocomplete-content').html('');
        let search = $(this).val();

        if (search !== "") {
          $.ajax({
            type: 'GET',
            url: '/search.php',
            data: 'search=' + encodeURIComponent(search),
            success: function (datas) {
            if (datas !== "") {
              $('#searchOnAPI').autocomplete(datas);
            } else {
            document.getElementById('autocomplete-content').innerHTML = '<ul class="autocomplete-content dropdown-content"><li><a class="black-text">{{ siteData('site.search.nodata') }}</a></li></ul>';
            }
          }
          });
        }
      });
    });
  </script>

我觉得问题出在这里：

可变数据 ...

但我不再理解错误了。

success: function (datas) {
   if (datas !== "") {
      $('#searchOnAPI').autocomplete(datas);
   }

搜索页面的代码：并调用API

<?php

if (isset($_GET['search']) && !empty($_GET['search'])) {
    $search = trim(htmlspecialchars($_GET['search']));

    $curl = curl_init();
        curl_setopt_array($curl, [
            CURLOPT_URL             => "https://api.themoviedb.org/3/search/multi?api_key=". API_KEY ."&language=fr-FR&query=$search",
            CURLOPT_CAINFO          => dirname(__DIR__) . DIRECTORY_SEPARATOR . 'lib' . DIRECTORY_SEPARATOR ."cert.tmdb.cer", //api.themoviedb.org
            CURLOPT_RETURNTRANSFER  => true,
            CURLOPT_FOLLOWLOCATION  => true,
            CURLOPT_ENCODING        => "",
            CURLOPT_MAXREDIRS       => 10,
            CURLOPT_TIMEOUT         => 10,
            CURLOPT_HTTP_VERSION    => CURL_HTTP_VERSION_1_1,
            CURLOPT_CUSTOMREQUEST   => "GET"
        ]);

        $response = curl_exec($curl);
        $err = curl_error($curl);


        $response = json_decode($response, true);
        $err = json_decode($err, true);
        $datas = [];

        if (!is_null($err) || $response === null || !isset($response['results'])) {
            $datas[] = ['No Data' => null];
        } else {

            $response = $response['results'];
            for ($i = 0; $i <= 5; $i++) {
                if (isset($response[$i]['title'])) {
                    $datas[] = $response[$i]['title'] ;
                } elseif (isset($response[$i]['name'])) {
                    $datas[] = $response[$i]['name'];
                }
            }
            
            echo json_encode(array_fill_keys(['data'], array_fill_keys($datas, null)), true);
        }

}

这里是搜索页面的 json 中的 api 返回


{
  "data": {
    "O Amor Acontece": null,
    "Quem Quer Namorar Com o Agricultor?": null,
    "O'": null,
    "O Clone": null,
    "Hawaï police d'État": null,
    "O Matador": null
  }
}

欢迎任何建议！ .EDD

【问题讨论】：

看起来 API 调用发生在 keyup 上？那是你要初始化的地方吗？还是我错过了什么？
是的，目前是这样，但将来我会从 sort 修改它以每 X 秒调用一次......但我的问题是我无法注入来自的 JSON 返回search.php 页面进入我的自动完成

标签： javascript php jquery ajax materialize

【解决方案1】：

你的 PHP 代码返回一个带有“数据”参数的 json 对象，也许你可以试试

   if (datas !== "") {
      $('#searchOnAPI').autocomplete(datas.data);
   }

【讨论】：

【解决方案2】：

我发现了错误：

$.ajax({
    type: 'GET',
    url: '/search.php',
    data: 'search=' + encodeURIComponent(search),
    success: function (datas) {

我没有设置dataType ...

dataType:"json",

喜欢这个

$.ajax({
    type: 'GET',
    dataType:"json",
    url: '/search.php',
    data: 'search=' + encodeURIComponent(search),
    success: function (datas) {

但一切正常。

查找 [Jquery 自动完成 _renderItem 不工作][1]

【讨论】：