Mostrar resultados de búsqueda al escribir AJAX y PHP

Question

Estoy tratando de hacer algún tipo de búsqueda en vivo con ajax para mostrar una lista de usuarios mientras escribe en una barra de búsqueda. Estoy luchando para devolver los datos y mostrarlos en mi opinión. lo que he intentado hasta ahora: Mi guión JQuery: $(document).ready(function (){ const base_url = 'php echo base_url();?'; $( #search_user ).keyup(function (e){ e.preventDefault(); const val = $(this).value; $.ajax({ type:  POST , url: base_url +  /public/Friendcontroller/search , // the method we are calling data: {search:val}, dataType:  json , success: function (result) { response(result); console.log( Success ,result); }, error: function (result) { console.error( unsuccessful ,result); } }); }); }); Mi función controladora y función modelo: Función de búsqueda del controlador public function search(): array { return $this->friend_model->liveSearch($_POST['search']); } Función modelo public function liveSearch($val) { $search = array(); $result = $val; $getUser =  SELECT * FROM users WHERE userName LIKE '%$result%' OR firstName LIKE '%$result%' OR lastName LIKE '%$result%' ; $query = $this->db->query($getUser); foreach ($query->getResult() as $row) { $userID = $row->userID; $firstName = $row->firstName; $lastName = $row->lastName; $userName = $row->userName; $avatar = $row->avatarUrl; array_push($search, array('userID' => $userID, 'firstName' => $firstName, 'lastName' => $lastName, 'userName' => $userName, 'avatarUrl' => $avatar)); } return $search; } El HTML donde quiero dar los resultados: php foreach (//Result from AJAX call here): ? = $result['userName'] ? = $result['firstName'] .     . $result['lastName'] ?

algorithmalchemist · Accepted Answer

Creo que debe devolver el array json codificado o "build" y devolver una cadena html para anexarlo donde quiera éxito

Si devuelves una cadena html entonces puedes hacer esto con éxito

success: function (result) {
                $("your div").html(result);
                console.log("Success",result);
            }

Si vuelves json return json_encode($search); entonces usted debe iterar sobre cada fila y crear / Apéndice los elementos que desea.

Respondida el Dec 17, 2020 a las 11:53 - por algorithmalchemist

algorithmwizard · Answer

Ya no puedes usar php en el html porque ya ha sido ejecutado servidorside,

tiene que reconstruir el html con javascript, algo como:

success: function (result) {
    var $container = $('#resultContainer');
    $.each(result,function(i,res){
        $container.append(''+res.userName+'');
    });
},

Respondida el Dec 17, 2020 a las 11:58 - por algorithmwizard

Gpt · Answer

Para mostrar los resultados de la búsqueda en tiempo real utilizando AJAX y PHP, primero necesitas realizar algunas correcciones en tu código. En tu script jQuery, cuando obtienes el valor de la búsqueda, debes usar `$(this).val()` en lugar de `$(this).value` para obtener el valor del campo de búsqueda correctamente. En tu controlador, necesitas devolver los resultados de la búsqueda como un JSON. Puedes hacerlo de la siguiente manera: php public function search() { $results = $this->friend_model->liveSearch($_POST['search']); echo json_encode($results); } En tu script jQuery, necesitas iterar sobre los resultados devueltos por AJAX y luego insertar los resultados en el HTML. Puedes hacerlo de la siguiente manera: javascript success: function (result) { $.each(result, function(index, user) { var html = `

/public/uploads/avatars/` + user.avatarUrl + ` />

` + user.userName + `

` + user.firstName + ` ` + user.lastName + `

`; $('search-results').append(html); }); } En tu HTML, necesitas tener un contenedor donde se mostrarán los resultados de la búsqueda. Puedes agregar un div con un id de `search-results`. También, debes corregir la forma en que haces el bucle `foreach` en PHP: html En tu HTML PHP, debes hacer el bucle correctamente para mostrar los resultados de la búsqueda devueltos por AJAX: html Con estas correcciones, tu función de búsqueda en vivo debería funcionar correctamente y mostrar los resultados de la búsqueda a medida que escribes en la barra de búsqueda. Recuerda también verificar la consola del navegador para ver si hay errores en la respuesta AJAX.

Gemini · Answer

El problema aquí es que no estás procesando la respuesta de la llamada AJAX correctamente. En tu función de éxito AJAX, debes analizar la respuesta JSON y luego usarla para actualizar tu HTML. Aquí tienes un ejemplo de código actualizado: Script JQuery: $(document).ready(function () { const base_url = '/'; $( search_user ).keyup(function (e) { e.preventDefault(); const val = $(this).val(); $.ajax({ type: POST , url: base_url + /public/Friendcontroller/search , data: { search: val }, dataType: json , success: function (result) { $( search_results ).html( ); $.each(result, function (index, data) { $( search_results ).append(`

${data.userName}

${data.firstName} ${data.lastName}

`); }); }, error: function (result) { console.error( unsuccessful , result); }, }); }); }); En el código actualizado, hemos agregado un div con el ID search_results donde mostraremos los resultados de la búsqueda. Luego, en la función de éxito AJAX, iteramos sobre la respuesta JSON y agregamos cada resultado a #search_results utilizando jQuery.

Mostrar resultados de búsqueda al escribir AJAX y PHP

= $result['userName'] ?

= $result['firstName'] . " " . $result['lastName'] ?

4 Respuestas:

'+res.userName+'