Para crear un sistema de sugerencias de búsqueda similar a los motores de búsqueda populares, podemos integrar la biblioteca jQuery UI con el framework PHP CoreThink. A continuación, se detalla el proceso de configuración dentro de un módulo de CoreThink.
Configuración del Módulo
Primero, definimos la estructura básica del módulo en el archivo de configuración mod_info.php.
<?php
return [
'module' => [
'name' => 'SearchSuggest',
'title' => 'Módulo de Sugerencias',
'icon' => 'fas fa-search',
'description' => 'Implementa autocompletado para búsquedas',
],
'admin' => [
'menu' => [
[
'title' => 'Gestión de Sugerencias',
'icon' => 'fas fa-list',
'url' => 'SearchSuggest/admin',
],
],
],
];
Cnotrolador Principal
El controlador gestionará las peticiones AJAX y devloverá los datos de sugerencia. Modificaremos la lógica para devolver datos dinámicos.
<?php
namespace SearchSuggest\Controller;
use Think\Controller;
class SuggestController extends Controller {
public function index() {
$this->display();
}
public function fetchSuggestions() {
$query = I('get.term');
$results = [];
if (strlen($query) > 0) {
// Simulación de una búsqueda en base de datos
$sourceData = [
'javascript', 'java', 'python', 'php', 'ruby',
'c++', 'swift', 'kotlin', 'typescript', 'rust'
];
foreach ($sourceData as $item) {
if (stripos($item, $query) !== false) {
$results[] = $item;
}
}
}
$this->ajaxReturn($results, 'json');
}
}
Interfaz de Usuario
La vista integra jQuery UI Autocomplete, configurando la fuente de datos mediante una petición AJAX al controlador.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Buscador con Sugerencias</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css">
</head>
<body>
<div class="search-container">
<input type="text" id="search-input" placeholder="Escribe para buscar...">
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
$("#search-input").autocomplete({
minLength: 1,
source: function(request, response) {
$.ajax({
url: "{:U('SearchSuggest/Suggest/fetchSuggestions')}",
dataType: "json",
data: { term: request.term },
success: function(data) {
response(data);
}
});
}
});
});
</script>
</body>
</html>
El sistema ahora mostrará sugerencias cuando el usuario escriba al menos un carácter, filtrando los rseultados de la fuente de datos definida en el controlador.