Adicionando preenchimento automático aos seus aplicativos Laravel com Atlas Search

Abdulrasaq Jamiu Adewuyi9 min read • Published Nov 26, 2024 • Updated Dec 03, 2024

Pesquisa PHP Atlas

Avalie esse Tutorial

A implementação de um recurso de pesquisa se tornou extremamente importante para todos os aplicativos da web que valores a experiência do usuário, pois os usuários podem pesquisar o que precisam ver sem rolar sem parar.
Neste tutorial, criaremos um aplicação de filmes aproveitando o Atlas Search com o Laravel (um framework PHP popular) para criar um recurso de pesquisa avançado baseado em texto que permite aos usuários pesquisar filmes digitando algumas letras.

Por que usar o Atlas Search?

O esquema flexível do MongoDB, Atlas Search, e os poderosos recursos de query, combinados com a sintaxe expressiva do Laravel, permitem-nos implementar funcionalidades de pesquisa avançada rapidamente.

A origem deste aplicação pode ser encontrada Github em Github .

Pré-requisitos

Configurar banco de dados de dados

Para configurar nosso ambiente MongoDB , criar um cluster de banco de dados de dados, definir o acesso ao banco de dados de banco de dados e obter a string de conexão, devemos seguir as instruções abaixo da documentação oficial do MongoDB .

Cadastre-se para uma conta MongoDB gratuita.
Criar um cluster.
Adicionar um usuário do banco de dados
Configure uma conexão de rede.

Identifique um banco de dados para trabalhar

Depois de configurarmos nosso cluster, precisamos carregar alguns dados de amostra com os quais trabalharemos para essa implementação e obter nossa string de conexão.

Sua string de conexão deve ficar assim: mongodb+srv://user:password@cluster0.xxxxx.mongodb.net

Se você concluir as etapas acima, os dados de amostra deverão ser carregados no seu cluster. Caso contrário, confira a documentação sobre como carregar dados de amostra.

Depois de carregar os dados com sucesso, devemos ter um banco de dados chamado sample_mflix em nosso cluster. Trabalharemos com a coleção de filmes no banco de dados.

Instalação de pacotes Laravel e MongoDB e configuração do ambiente

Com o banco de dados de dados configurado, vamos criar o projeto Laravel com o Composer. Para continuar, você deseja verificar se tem PHP, Laravel, Node, npm, Composer e, finalmente, a extensão PHP do MongoDB , todos configurados corretamente. Os links a seguir serão úteis.

Confira as instruções para a integração MongoDB e Laravel. Elas explicam como configurar um ambiente de desenvolvimento Laravel- MongoDB . Abordaremos a criação do aplicação Laravel e a configuração do MongoDB abaixo.

Criar um projeto Laravel

Com nosso ambiente de desenvolvimento funcionando, para criar um projeto Laravel, usaremos o Composer. Execute o código abaixo no termo no diretório de sua preferência.

1 composer create-project Laravel/Laravel movieapp

Este comando criará um novo projeto Laravel na pasta filmeapp. Após concluir a instalação, a estrutura da sua pasta deverá ficar como abaixo.

No terminal, execute o código abaixo para iniciar o servidor:

1 cd movieapp  
2 php artisan serve

Após o servidor estar em execução, ele deve estar disponível em `http://localhost:8000/`. Você deve ver a página inicial do Laravel, como mostrado abaixo.

Além disso, em uma nova janela do terminal, execute o comando abaixo para iniciar o servidor front-end.

1 npm install  
2 npm run dev

Com nosso servidor instalado e funcionando, vamos nos conectar ao nosso cluster MongoDB .

Conecte o servidor Laravel ao MongoDB

Para conectar o servidor ao cluster MongoDB que criamos anteriormente, siga abaixo:

Em primeiro lugar, oComposer permite adicionar o pacote Laravel MongoDB ao aplicação. No prompt de comando, vá para o diretório do projeto e execute o comando abaixo.
```
1 composer require mongodb/Laravel-mongodb
```
isso adicionará o pacoteMongoDB ao diretório de fornecedores
Vamos usar o Composer para adicionar outro pacote chamado mongodb/builder. Usaremos isso para criar um pipeline de agregação mais tarde neste guia. Execute o comando abaixo para adicionar mongodb/builder.
```
1 composer require mongodb/builder:^0.2   
```
Navegue até o arquivo .env. Vamos atualizar o valorDB_CONNECTION e adicionar um DB_URL conforme abaixo:

1  DB_CONNECTION=mongodb  
2  DB_URI=mongodb_connection_string_here

Atualize o texto mongodb_connection_string_here com sua string de conexão de banco de dados .
4. Navegue até o arquivo config/ banco de dados.php e atualize a connection array conforme abaixo:

1   'connections' => [
2        'mongodb' => [
3            'driver' => 'mongodb',
4            'dsn' => env('DB_URI'),
5            'database' => 'sample_mflix',
6        ],

Ainda no arquivo .php do banco de dados de configuração, atualize a string padrão como:

1 'default' => env('DB_CONNECTION'),

Isso é para definir o MongoDB como a conexão padrão para o aplicação. Com essas variáveis atualizadas, devemos conseguir nos conectar ao MongoDB com sucesso,

Vamos criar uma rota no /routes/web.php:

1 <?php
2 use Illuminate\Support\Facades\Route;
3 // Import the Request class 
4 use Illuminate\Http\Request; 
5 // Import the DB facade
6 use Illuminate\Support\Facades\DB; 
7 Route::get('/', function () {
8    return view('welcome');
9 });
10 //add ping route
11 Route::get('/connect', function (Request $request) {   
12    $connection = DB::connection('mongodb');
13    $msg = 'MongoDB is accessible!';
14    try {     $connection->getMongoClient()->selectDatabase($connection->getDatabaseName())->command(['ping' => 1]); 
15    } catch (\Exception $e) { 
16        $msg = 'MongoDB is not accessible. Error: ' . $e->getMessage();
17    }
18    return response()->json(['msg' => $msg]);
19 });

No terminal, execute a rota manual do PHP
. Você deve ver a rota na lista. No navegador, navegue até http://localhost:8000/connect/. Você deverá ver uma mensagem de sucesso {"msg":"MongoDB está acessível! "}.

Criar um modelo de filme (modelo MongoDB Eloquent)

Vamos criar um modelo Eloquent para nosso banco de dados MongoDB chamado "Movie", pois trabalharemos com uma coleção chamada filmes. Por convenção, o " caso da cobra ", o nome plural da classe, será usado como nome da coleção, a menos que outro nome seja explicitamente especificado. Então, nesse caso, a Eloquent assumirá que o modeloMovie armazena documentos na coleção de filmes. Execute o comando a partir do diretório do projeto para criar o modelo de filme.

1 php artisan make:model Movie

Assim que o comando terminar de ser executado, ele criará /app/Models/Movie.php. Abra o arquivo e atualize conforme abaixo:

1 <?php
2 namespace App\Models;
3 use MongoDB\Laravel\Eloquent\Model;
4 class Movie extends Model
5 {
6 protected $connection = 'mongodb';
7 }

Com o modelo criado, vamos exibir alguns dos filmes em nossa página inicial.

Para fazer isso, atualize o /routes/web.php:

1 <?php
2 use Illuminate\Support\Facades\Route;
3 use App\Models\Movie;
4 Route::get('/', function () {
5    $movies = Movie::limit(20)->get(); // Retrieve only 20 movies
6    return view('welcome', [
7        'movies' => $movies
8    ]);
9 });

Em seguida, atualize a marcação docorpo de app/resources/views/Welcome.Blade.php, conforme abaixo.

1 <body class="font-sans antialiased dark:bg-black dark:text-white/50">
2    <div class="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
3        <img id="background" class="absolute -left-20 top-0 max-w-[877px]"
4            src="https://Laravel.com/assets/img/welcome/background.svg" alt="Laravel background"/>
5        <div
6            class="relative min-h-screen flex flex-col items-center justify-center selection:bg-[#FF2D20] selection:text-white">
7            <div class="relative w-full max-w-2xl px-6 lg:max-w-7xl">
8                 <div id="movie-list" class=' w-full flex gap-6 justify-around items-center flex-wrap'>
9            </div>
10        </div>
11    </div>
12    <script>
13        let movies = @json($movies);
14        displayMovies(movies)
15        function displayMovies(movies) {
16    const movieListDiv = document.getElementById('movie-list');
17    movieListDiv.innerHTML = movies.map(movie => `
18        <div class="movie-card max-w-sm bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
19            <div class="h-[400px]">
20                <img class="rounded-t-lg object-cover w-full h-full" src="${movie.poster}" alt="${movie.title}" />
21            </div>
22            <div class="p-5">
23                <a href="#">
24                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white line-clamp-1">
25                        ${movie.title}
26                    </h5>
27                </a>
28                <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 line-clamp-2">${movie.plot}</p>
29                <a href="#"
30                    class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
31                    See more               
32 </a>
33            </div>
34        </div>
35    `).join('');
36 }
37    </script>
38   </body>

Atualize seu aplicação em http://localhost:8000. Você deve ter uma lista de filmes exibidos na tela, conforme abaixo.

Você recebeu um erro, E11000 collection de erro de chave duplicada: sample_mflix.sessions index: user_id_1 chave duplicada: { user_id: null }? Nesse caso, vá para a coleção desessões no banco de dados sample_mflix , limpe o documento e tente novamente.

Com o aplicação em execução, vamos até o painel do MongoDB Atlas para criar um índice de pesquisa do Atlas Search. Mas antes disso...

criar um índice do atlas search

Para implementar o recurso de forma que possamos pesquisar filmes por seu título, vamos criar um índice de pesquisa a partir do painel do MongoDB Atlas .

No cluster criado anteriormente, clique em Browse collections, navegue até a aba Atlas Search e clique em Create index no lado direito da página de pesquisa. Nesta tela, selecione Editor JSON em Atlas Search, clique em Avançar para continuar, adicione um nome de índice (no nosso caso, Movie_search), selecione a coleção defilmes no banco de dadossample_mflix e atualize o editor JSON conforme abaixo. Clique em Avançar.

1 {
2   "mappings": {
3     "dynamic": false,
4     "fields": {
5       "title": {
6         "type": "string"
7       }
8     }
9   }
10 }

Criar um índice autocomplete do Atlas Search

Em seguida, adicionaremos outro índice de pesquisa, mas desta vez o tipo será preenchimento automático. Vamos usá-lo para implementar um recurso de modo que, quando um usuário digitar na caixa de entrada, ele sugira possíveis títulos de filmes.

Crie outro índice, dê um nome a ele (no nosso caso, Movie_title_autocomplete) e atualize o editor JSON, conforme abaixo:

1 {
2   "mappings": {
3     "dynamic": false,
4     "fields": {
5       "title": {
6         "type": "autocomplete"
7       }
8     }
9   }
10 }

Crie um endpoint de API de rotas de pesquisa com o Eloquent do Laravel

Vamos criar duas funções chamadas searchByTittle e autocompleteByTittle dentro da classe de modelo Movie . Essas funções implementarão a pesquisa e os recursos de preenchimento automático, respectivamente.

Portanto, vamos atualizar o arquivo app/Models/Movie.php conforme abaixo.

1 <?php
2 namespace App\Models;
3 use Illuminate\Support\Collection;
4 use MongoDB\Laravel\Eloquent\Model;
5 
6 class Movie extends Model
7 {
8     protected $connection = 'mongodb';
9 
10     public static function searchByTitle(string $input): Collection
11     {
12         return self::aggregate()
13             ->search([
14                 'index' => 'movie_search',
15                 'compound' => [
16                     'must' => [
17                         [
18                             'text' => [
19                                 'query' => $input,
20                                 'path' => 'title',
21                                 'fuzzy' => ['maxEdits' => 2] // Adding fuzzy matching
22                             ]
23                         ]
24                     ]
25                 ]
26             ])
27             ->limit(20)
28             ->project(title: 1, genres: 1, poster: 1, rated: 1, plot: 1)
29         ->get();
30     }
31 
32     public static function autocompleteByTitle(string $input): Collection
33     {
34         return self::aggregate()
35             ->search([
36                 'index' => 'movie_title_autocomplete',
37                 'autocomplete' => [
38                     'query' => $input,
39                     'path' => 'title'
40                 ],
41                 'highlight' => [
42                     'path' => ['title']
43                 ]
44             ])
45             ->limit(5) // Limit the result to 5
46             ->project(title: 1, highlights: ['$meta' => 'searchHighlights'])
47             ->get();
48     }
49 }

Observação: colocar o código que faz a query de pesquisa na classe de modelo separa a camada de acesso a dados dos drivers HTTP HTTP. Isso torna o código mais testável.

Vamos criar um controlador para implementar a API de pesquisa no projeto. Vamos executar o código abaixo para criar um controlador.

1 php artisan make:controller SearchController

Este comando criará um arquivo app/ HTTPHTTP/Controllers/SearchController.php. Vamos atualizar o arquivo conforme abaixo.

1 <?php
2 namespace App\Http\Controllers;
3 use App\Models\Movie;
4 use Illuminate\Http\JsonResponse;
5 
6 class SearchController extends Controller
7 {
8    public function search($search): JsonResponse
9    {
10        // Define the aggregation based on the search conditions
11        if (!empty($search)) {
12            $items = Movie::searchByTitle($search);
13            return response()->json($items, 200);
14        }
15        return response()->json(['error' => 'conditions not met'], 400);
16    }
17 }

Em seguida, vamos criar uma rota de API.

Navegue para app/routes/web.php:

1 // import the SearchController
2 use App\Http\Controllers\SearchController;
3 
4 Route::get('/search/{search}', [SearchController::class, 'search']);

Teste a API chamando-a da seguinte forma:
http://localhost:8000/search/moving trem

Criar endpoints de API de rotas de preenchimento automático com o Eloquent do Laravel

Navegue até o arquivo app/ HTTPHTTP/Controllers/SearchController.php e adicione a função abaixo após o final da função `search`.

1 public function autocomplete($param): JsonResponse
2    {
3        try {
4           $results = Movie::autocompleteByTitle($param);
5            return response()->json($results, 200);
6        } catch (\Exception $e) {
7            return response()->json(['error' => $e->getMessage()], 500);
8        }
9    }
10    }

Em seguida, vamos criar uma rota de API. Navegue até app/routes/web.php.

1 Route::get('/autocomplete/{param}', [SearchController::class, 'autocomplete']);

Teste a API chamando-a da seguinte forma:

1 http://localhost:8000/autocomplete/hello

Implemente o preenchimento automático em nosso aplicação front-end

Para ver esses implementos em ação, vamos atualizar a marcação do corpo do app/resources/views/Welcome.Blade.php conforme abaixo.
Obtenha o trecho de código completo no Github.

1 <body class="font-sans antialiased dark:bg-black dark:text-white/50">
2     <script>
3         let debounceTimer;
4         let movies = @json($movies);
5         displayMovies(movies)
6 
7         function handleSearch(event) {
8             const query = event.target.value;
9             // Clear the previous debounce timer
10             clearTimeout(debounceTimer);
11             // Set up a new debounce timer
12             debounceTimer = setTimeout(() => {
13                 if (query.length > 2) { // Only search when input is more than 2 characters
14                     titleAutocomplete(query);
15                 }
16             }, 300);
17         }
18 
19         async function titleAutocomplete(query) {
20             try {
21                 const response = await fetch(`/autocomplete/${encodeURIComponent(query)}`);
22                 const movies = await response.json();
23                 displayResults(movies);
24             } catch (error) {
25                 console.error('Error fetching movies:', error);
26             }
27         }
28 
29         async function fetchMovies(query) {
30             try {
31                 const response = await fetch(`/search/${encodeURIComponent(query)}`);
32                 const movies = await response.json();
33                 displayMovies(movies);
34                 displayResults([])
35             } catch (error) {
36                 console.error('Error fetching movies:', error);
37             }
38         }
39 
40         function displayResults(movies) {
41             const resultsDiv = document.getElementById('search-results');
42             resultsDiv.innerHTML = movies.map(movie => ` <div onclick="fetchMovies('${movie.title}')" class='select-none text-gray-600 cursor-pointer flex items-center gap-[10px]'>
43                                                        <div>
44                                                            ${movie.title}
45                                                        </div>
46                                                    </div>`).join('');
47         }
48 
49 
50         function displayMovies(movies) {
51             const movieListDiv = document.getElementById('movie-list');
52             movieListDiv.innerHTML = movies.map(movie => `
53        <div class="movie-card max-w-sm bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
54            <div class="h-[400px]">
55                <img class="rounded-t-lg object-cover w-full h-full" src="${movie.poster}" alt="${movie.title}" />
56            </div>
57            <div class="p-5">
58                <a href="#">
59                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white line-clamp-1">
60                        ${movie.title}
61                    </h5>
62                </a>
63                <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 line-clamp-2">${movie.plot}</p>
64                <a href="#"
65                    class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
66                    See more
67                    <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
68                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
69                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
70                            stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
71                    </svg>
72                </a>
73            </div>
74        </div>
75    `).join('');
76         }
77     </script>
78     </body>

Nas alterações acima:

Adicionamos uma função chamada exibiçãoMovies, que usa filmes como argumento. Ele renderizará cartões de filme na tela com base na lista de filmes.
Em seguida, temos uma função chamada handleSearch que é um manipulador de eventooninput para a caixa de entrada de pesquisa.
Na funçãohandleSearch , temos uma função chamada titleAutocomplete, que obtém e exibe dados do endpoint da API de preenchimento automático.
Em seguida, temos a funçãofetchMovies, que obtém dados do ponto de extremidade da API de pesquisa dentro do qual chamamos a função exibiçãoMovies para exibir a resposta do filme para a API.

Com todas essas alterações feitas, acesse http://localhost:8000/ para testar, conforme mostrado abaixo.

Conclusão

É crucial tornar mais fácil para seus usuários encontrarem o que procuram em um website para que tenham uma ótima experiência de usuário. Neste guia, mostrei como criei uma pesquisa de texto para um aplicação de filme com o Atlas Search. Essa pesquisa permitirá que os usuários pesquisem filmes por título.

O Atlas Search é um mecanismo de pesquisa de texto completo que permite aos desenvolvedores implementar uma funcionalidade de pesquisa avançada em seus aplicativos. Ele permite que os usuários pesquisem grandes quantidades de dados de forma rápida e eficiente.

Saiba mais sobre Atlas Search e uso do PHP com o MongoDB.

Você tem perguntas ou comentários? Vamos continuar a conversa! Acesse a Comunidade de desenvolvedores MongoDB , queremos ouvir MongoDB Developer Community você.

Você pode se conectar conosco no Twitter.

Feliz codificação.

Avalie esse Tutorial

Relacionado

Tutorial

Múltiplas conexões MongoDB em um único aplicativo

Apr 02, 2024 | 10 min read

Tutorial

Como implementar o MongoDB Atlas com o AWS CDK no TypeScript

Jan 23, 2024 | 5 min read

Tutorial

Introdução ao MongoDB Atlas Search e Java

Jul 30, 2024 | 7 min read

Tutorial

Primeiro passos na segurança do Atlas Stream Processing

May 17, 2024 | 9 min read

Sumário

Pré-requisitos
Instalação de pacotes Laravel e MongoDB e configuração do ambiente
Criar um projeto Laravel
Conecte o servidor Laravel ao MongoDB
Criar um modelo de filme (modelo MongoDB Eloquent)
criar um índice do atlas search
Criar um índice autocomplete do Atlas Search
Crie um endpoint de API de rotas de pesquisa com o Eloquent do Laravel
Criar endpoints de API de rotas de preenchimento automático com o Eloquent do Laravel
Implemente o preenchimento automático em nosso aplicação front-end
Conclusão

1	DB_CONNECTION=mongodb
2	DB_URI=mongodb_connection_string_here

1	'connections' => [
2	'mongodb' => [
3	'driver' => 'mongodb',
4	'dsn' => env('DB_URI'),
5	'database' => 'sample_mflix',
6	],

1	<?php
2	use Illuminate\Support\Facades\Route;
3	// Import the Request class
4	use Illuminate\Http\Request;
5	// Import the DB facade
6	use Illuminate\Support\Facades\DB;
7	Route::get('/', function () {
8	return view('welcome');
9	});
10	//add ping route
11	Route::get('/connect', function (Request $request) {
12	$connection = DB::connection('mongodb');
13	$msg = 'MongoDB is accessible!';
14	try { $connection->getMongoClient()->selectDatabase($connection->getDatabaseName())->command(['ping' => 1]);
15	} catch (\Exception $e) {
16	$msg = 'MongoDB is not accessible. Error: ' . $e->getMessage();
17	}
18	return response()->json(['msg' => $msg]);
19	});

1	<?php
2	namespace App\Models;
3	use MongoDB\Laravel\Eloquent\Model;
4	class Movie extends Model
5	{
6	protected $connection = 'mongodb';
7	}

1	<?php
2	use Illuminate\Support\Facades\Route;
3	use App\Models\Movie;
4	Route::get('/', function () {
5	$movies = Movie::limit(20)->get(); // Retrieve only 20 movies
6	return view('welcome', [
7	'movies' => $movies
8	]);
9	});

1	<body class="font-sans antialiased dark:bg-black dark:text-white/50">
2	<div class="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
3	<img id="background" class="absolute -left-20 top-0 max-w-[877px]"
4	src="https://Laravel.com/assets/img/welcome/background.svg" alt="Laravel background"/>
5	<div
6	class="relative min-h-screen flex flex-col items-center justify-center selection:bg-[#FF2D20] selection:text-white">
7	<div class="relative w-full max-w-2xl px-6 lg:max-w-7xl">
8	<div id="movie-list" class=' w-full flex gap-6 justify-around items-center flex-wrap'>
9	</div>
10	</div>
11	</div>
12	<script>
13	let movies = @json($movies);
14	displayMovies(movies)
15	function displayMovies(movies) {
16	const movieListDiv = document.getElementById('movie-list');
17	movieListDiv.innerHTML = movies.map(movie => `
18	<div class="movie-card max-w-sm bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
19	<div class="h-[400px]">
20	<img class="rounded-t-lg object-cover w-full h-full" src="${movie.poster}" alt="${movie.title}" />
21	</div>
22	<div class="p-5">
23	<a href="#">
24	<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white line-clamp-1">
25	${movie.title}
26	</h5>
27	</a>
28	<p class="mb-3 font-normal text-gray-700 dark:text-gray-400 line-clamp-2">${movie.plot}</p>
29	<a href="#"
30	class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
31	See more
32	</a>
33	</div>
34	</div>
35	`).join('');
36	}
37	</script>
38	</body>

1	{
2	"mappings": {
3	"dynamic": false,
4	"fields": {
5	"title": {
6	"type": "string"
7	}
8	}
9	}
10	}

1	<?php
2	namespace App\Models;
3	use Illuminate\Support\Collection;
4	use MongoDB\Laravel\Eloquent\Model;
5
6	class Movie extends Model
7	{
8	protected $connection = 'mongodb';
9
10	public static function searchByTitle(string $input): Collection
11	{
12	return self::aggregate()
13	->search([
14	'index' => 'movie_search',
15	'compound' => [
16	'must' => [
17	[
18	'text' => [
19	'query' => $input,
20	'path' => 'title',
21	'fuzzy' => ['maxEdits' => 2] // Adding fuzzy matching
22	]
23	]
24	]
25	]
26	])
27	->limit(20)
28	->project(title: 1, genres: 1, poster: 1, rated: 1, plot: 1)
29	->get();
30	}
31
32	public static function autocompleteByTitle(string $input): Collection
33	{
34	return self::aggregate()
35	->search([
36	'index' => 'movie_title_autocomplete',
37	'autocomplete' => [
38	'query' => $input,
39	'path' => 'title'
40	],
41	'highlight' => [
42	'path' => ['title']
43	]
44	])
45	->limit(5) // Limit the result to 5
46	->project(title: 1, highlights: ['$meta' => 'searchHighlights'])
47	->get();
48	}
49	}

1	<?php
2	namespace App\Http\Controllers;
3	use App\Models\Movie;
4	use Illuminate\Http\JsonResponse;
5
6	class SearchController extends Controller
7	{
8	public function search($search): JsonResponse
9	{
10	// Define the aggregation based on the search conditions
11	if (!empty($search)) {
12	$items = Movie::searchByTitle($search);
13	return response()->json($items, 200);
14	}
15	return response()->json(['error' => 'conditions not met'], 400);
16	}
17	}

1	// import the SearchController
2	use App\Http\Controllers\SearchController;
3
4	Route::get('/search/{search}', [SearchController::class, 'search']);

1	public function autocomplete($param): JsonResponse
2	{
3	try {
4	$results = Movie::autocompleteByTitle($param);
5	return response()->json($results, 200);
6	} catch (\Exception $e) {
7	return response()->json(['error' => $e->getMessage()], 500);
8	}
9	}
10	}

1	<body class="font-sans antialiased dark:bg-black dark:text-white/50">
2	<script>
3	let debounceTimer;
4	let movies = @json($movies);
5	displayMovies(movies)
6
7	function handleSearch(event) {
8	const query = event.target.value;
9	// Clear the previous debounce timer
10	clearTimeout(debounceTimer);
11	// Set up a new debounce timer
12	debounceTimer = setTimeout(() => {
13	if (query.length > 2) { // Only search when input is more than 2 characters
14	titleAutocomplete(query);
15	}
16	}, 300);
17	}
18
19	async function titleAutocomplete(query) {
20	try {
21	const response = await fetch(`/autocomplete/${encodeURIComponent(query)}`);
22	const movies = await response.json();
23	displayResults(movies);
24	} catch (error) {
25	console.error('Error fetching movies:', error);
26	}
27	}
28
29	async function fetchMovies(query) {
30	try {
31	const response = await fetch(`/search/${encodeURIComponent(query)}`);
32	const movies = await response.json();
33	displayMovies(movies);
34	displayResults([])
35	} catch (error) {
36	console.error('Error fetching movies:', error);
37	}
38	}
39
40	function displayResults(movies) {
41	const resultsDiv = document.getElementById('search-results');
42	resultsDiv.innerHTML = movies.map(movie => ` <div onclick="fetchMovies('${movie.title}')" class='select-none text-gray-600 cursor-pointer flex items-center gap-[10px]'>
43	<div>
44	${movie.title}
45	</div>
46	</div>`).join('');
47	}
48
49
50	function displayMovies(movies) {
51	const movieListDiv = document.getElementById('movie-list');
52	movieListDiv.innerHTML = movies.map(movie => `
53	<div class="movie-card max-w-sm bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
54	<div class="h-[400px]">
55	<img class="rounded-t-lg object-cover w-full h-full" src="${movie.poster}" alt="${movie.title}" />
56	</div>
57	<div class="p-5">
58	<a href="#">
59	<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white line-clamp-1">
60	${movie.title}
61	</h5>
62	</a>
63	<p class="mb-3 font-normal text-gray-700 dark:text-gray-400 line-clamp-2">${movie.plot}</p>
64	<a href="#"
65	class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
66	See more
67	<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
68	xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
69	<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
70	stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
71	</svg>
72	</a>
73	</div>
74	</div>
75	`).join('');
76	}
77	</script>
78	</body>