Buenos días a todos, estoy usando materialize.css en una aplicación PHP
Querré inicializar los datos de autocompletar con una llamada a la API.
El .autocomplete () inicializa los datos con una matriz JSON " data ": ,
que obtengo con .ajax ({..., url: '/search.php', ... datas}) .
pero no puedo inyectar los datas en .autocomplete () ,
¿Cómo puedo hacerlo?
Aquí está el código fuente:
<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>Creo que el problema viene de aquí:
Los datos variables...
pero ya no entiendo el error.
success: function (datas) { if (datas !== "") { $('#searchOnAPI').autocomplete(datas); }el código de la página de búsqueda: y llama a la 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); } }y aquí está el retorno de la API en json de la página de búsqueda
{ "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 } }¡Cualquier consejo es bienvenido! .EDD
Su código PHP está devolviendo un objeto json con un parámetro de 'datos', tal vez podría intentar
if (datas !== "") { $('#searchOnAPI').autocomplete(datas.data); }Encontré el error:
$.ajax({ type: 'GET', url: '/search.php', data: 'search=' + encodeURIComponent(search), success: function (datas) {No configuré el tipo de datos ...
dataType:"json",
Me gusta esto
$.ajax({ type: 'GET', dataType:"json", url: '/search.php', data: 'search=' + encodeURIComponent(search), success: function (datas) {Pero con todo funciona.
encontrar en [Jquery autocompletar _renderItem no funciona][1]