Shape a delightful search experience in a snap

1const client = new MeiliSearch('http://localhost:7700', 'masterKey')
2
3await client.index('movies').addDocuments([
4  { 'id': 1, 'title': 'Carol' },
5  { 'id': 2, 'title': 'Wonder Woman' },
6  { 'id': 3, 'title': 'Life of Pi' },
7  { 'id': 4, 'title': 'Mad Max: Fury Road' },
8  { 'id': 5, 'title': 'Moana' },
9  { 'id': 6, 'title': 'Philadelphia'}
10])
11
12// be aware this client is using the masterKey, it should not be used in front end
13const search = await index.search('philodelphia')
14console.log(search)

1$client = new Client('http://localhost:7700', 'masterKey');
2
3$client->index('movies')->addDocuments([
4  ['id' => 1, 'title' => 'Carol'],
5  ['id' => 2, 'title' => 'Wonder Woman'],
6  ['id' => 3, 'title' => 'Life of Pi'],
7  ['id' => 4, 'title' => 'Mad Max: Fury Road'],
8  ['id' => 5, 'title' => 'Moana'],
9  ['id' => 6, 'title' => 'Philadelphia'],
10]);

1client = meilisearch.Client('http://localhost:7700', 'masterKey')
2
3client.index('movies').add_documents([
4  { 'id': 1, 'title': 'Carol' },
5  { 'id': 2, 'title': 'Wonder Woman' },
6  { 'id': 3, 'title': 'Life of Pi' },
7  { 'id': 4, 'title': 'Mad Max: Fury Road' },
8  { 'id': 5, 'title': 'Moana' },
9  { 'id': 6, 'title': 'Philadelphia'}
10])

1client = MeiliSearch::Client.new('http://localhost:7700', 'masterKey')
2
3client.index('movies').add_documents([
4  { id: 1, title: 'Carol' },
5  { id: 2, title: 'Wonder Woman' },
6  { id: 3, title: 'Life of Pi' },
7  { id: 4, title: 'Mad Max: Fury Road' },
8  { id: 5, title: 'Moana' },
9  { id: 6, title: 'Philadelphia' }
10])

1Client client = new Client(new Config("http://localhost:7700", "masterKey"));
2
3client.index("movies").addDocuments("["
4  + "{\"id\": 1, \"title\": \"Carol\"},"
5  + "{\"id\": 2, \"title\": \"Wonder Woman\"},"
6  + "{\"id\": 3, \"title\": \"Life of Pi\"},"
7  + "{\"id\": 4, \"title\": \"Mad Max: Fury Road\"},"
8  + "{\"id\": 5, \"title\": \"Moana\"},"
9  + "{\"id\": 6, \"title\": \"Philadelphia\"}"
10  + "]"
11);

1client := meilisearch.NewClient(meilisearch.ClientConfig{
2  Host: "http://localhost:7700",
3  APIKey: "masterKey",
4})
5
6documents := []map[string]interface{}{
7  { "id": 1, "title": "Carol" },
8  { "id": 2, "title": "Wonder Woman" },
9  { "id": 3, "title": "Life of Pi" },
10  { "id": 4, "title": "Mad Max: Fury Road" },
11  { "id": 5, "title": "Moana" },
12  { "id": 6, "title": "Philadelphia" },
13}
14client.Index("movies").AddDocuments(documents)

1MeilisearchClient client = new MeilisearchClient("http://localhost:7700", "masterKey");
2
3var documents = new Movie[] {
4    new Movie { Id = "1", Title = "Carol" },
5    new Movie { Id = "2", Title = "Wonder Woman" },
6    new Movie { Id = "3", Title = "Life of Pi" },
7    new Movie { Id = "4", Title = "Mad Max: Fury Road" },
8    new Movie { Id = "5", Title = "Moana", ", "Action" },
9    new Movie { Id = "6", Title = "Philadelphia" }
10};
11
12var task = await client.Index("movies").AddDocumentsAsync<Movie>(documents);

1var client = MeiliSearchClient('http://localhost:7700', 'masterKey');
2
3await client.index('movies').addDocuments([
4  { 'id': 1, 'title': 'Carol' },
5  { 'id': 2, 'title': 'Wonder Woman' },
6  { 'id': 3, 'title': 'Life of Pi' },
7  { 'id': 4, 'title': 'Mad Max: Fury Road' },
8  { 'id': 5, 'title': 'Moana' },
9  { 'id': 6, 'title': 'Philadelphia'}
10]);

1let client = Client::new("http://localhost:7700", "masterKey");
2
3#[derive(Serialize, Deserialize)]
4struct Movie {
5  id: String,
6  title: String
7}
8
9client.index("movies")
10  .add_documents(&[
11    Movie { id: "1".to_string(), title: "Carol".to_string() },
12    Movie { id: "2".to_string(), title: "Wonder Woman".to_string() },
13    Movie { id: "3".to_string(), title: "Life of Pi".to_string() },
14    Movie { id: "4".to_string(), title: "Mad Max: Fury Road".to_string() },
15    Movie { id: "5".to_string(), title: "Moana".to_string() },
16    Movie { id: "6".to_string(), title: "Philadelphia".to_string() }
17  ], Some("reference_number"))
18  .await
19  .unwrap();

1let client = try MeiliSearch(host: "http://localhost:7700", apiKey: "masterKey")
2let documents = """
3[
4  { "id": 1, "title": "Carol" },
5  { "id": 2, "title": "Wonder Woman" },
6  { "id": 3, "title": "Life of Pi" },
7  { "id": 4, "title": "Mad Max: Fury Road" },
8  { "id": 5, "title": "Moana" },
9  { "id": 6, "title": "Philadelphia"}
10]
11""".data(using: .utf8)!
12
13client.index("movies").addDocuments(documents: documents, primaryKey: "reference_number") { (result) in
14  switch result {
15  case .success(let task):
16      print(task)
17  case .failure(let error):
18      print(error)
19  }
20}

1<body>
2  <div>
3    <div id="searchbox"></div>
4    <div id="hits"></div>
5  </div>
6
7  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
8  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
9  <script>
10    const search = instantsearch({
11      indexName: 'movies',
12      searchClient: instantMeiliSearch(
13        'http://localhost:7700',
14        'searchKey'
15      ),
16    })
17
18    search.addWidgets([
19      instantsearch.widgets.searchBox({
20        container: '#searchbox',
21      }),
22      instantsearch.widgets.hits({
23        container: '#hits',
24        templates: {
25          item: `
26            <div>
27              <div class="hit-name">
28                {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
29              </div>
30            </div>
31          `,
32        },
33      }),
34    ])
35    search.start()
36  </script>
37</body>

1import React from 'react';
2import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch-dom';
3import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
4
5const searchClient = instantMeiliSearch(
6  "http://localhost:7700",
7  "searchKey"
8);
9
10const App = () => (
11  <InstantSearch
12    indexName="movies"
13    searchClient={searchClient}
14  >
15    <SearchBox />
16    <Hits hitComponent={Hit} />
17  </InstantSearch>
18);
19
20const Hit = (props) => (<Highlight attribute="title" hit={props.hit} />);

1// In main.js
2import Vue from 'vue';
3import App from './App.vue';
4import InstantSearch from 'vue-instantsearch';
5
6Vue.use(InstantSearch);
7
8new Vue({
9  el: '#app',
10  render: h => h(App),
11});
12
13
14// In App.vue
15<template>
16  <ais-instant-search :search-client="searchClient" index-name="movies">
17    <ais-search-box />
18    <ais-hits>
19      <div slot="item" slot-scope="{ item }">
20        <h2>{{ item.title }}</h2>
21      </div>
22    </ais-hits>
23  </ais-instant-search>
24</template>
25
26<script>
27import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
28
29export default {
30  data() {
31    return {
32      searchClient: instantMeiliSearch(
33        "http://localhost:7700",
34        "searchKey"
35      ),
36    };
37  },
38};
39</script>

1// In app.component.ts
2import { Component } from '@angular/core'
3import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
4
5const searchClient = instantMeiliSearch(
6  "http://localhost:7700",
7  "searchKey"
8)
9
10@Component({
11  selector: 'app-root',
12  templateUrl: './app.component.html',
13  styleUrls: ['./app.component.css'],
14})
15
16export class AppComponent {
17  title = 'angular-app'
18  config = {
19    indexName: 'movies',
20    searchClient,
21  }
22}
23
24// In app.modules.ts
25import { NgModule } from '@angular/core'
26import { BrowserModule } from '@angular/platform-browser'
27import { NgAisModule } from 'angular-instantsearch'
28
29import { AppComponent } from './app.component'
30
31@NgModule({
32  declarations: [AppComponent],
33  imports: [BrowserModule, NgAisModule.forRoot()],
34  providers: [],
35  bootstrap: [AppComponent],
36})
37
38export class AppModule {}
39
40// in app.component.html
41<div class="container">
42  <ais-instantsearch [config]="config">
43    <div class="search-panel">
44      <div class="search-panel__results">
45        <div class="searchbox">
46          <ais-search-box placeholder=""></ais-search-box>
47        </div>
48
49        <ais-hits>
50          <ng-template let-hits="hits">
51            <ol class="ais-Hits-list">
52              <li *ngFor="let hit of hits" class="ais-Hits-item">
53                <div class="hit-name">{{hit.title}}</div>
54              </li>
55            </ol>
56          </ng-template>
57        </ais-hits>
58      </div>
59    </div>
60  </ais-instantsearch>
61</div>

1# Create an initializer file like `config/initializers/meilisearch.rb`
2MeiliSearch::Rails.configuration = {
3  meilisearch_url: 'http://127.0.0.1:7700',
4  meilisearch_api_key: 'masterKey',
5}
6
7# Add Meilisearch to your ActiveRecord model
8class Movie < ActiveRecord::Base
9  include MeiliSearch::Rails
10
11  meilisearch index_uid: 'movies' do
12    attribute :title
13  end
14end
15
16# Inserting data in your DB table will automatically update your Meilisearch index
17Movie.create([
18  { title: 'Carol' },
19  { title: 'Wonder Woman' },
20  { title: 'Life of Pi' },
21  { title: 'Mad Max: Fury Road' },
22  { title: 'Moana' },
23  { title: 'Philadelphia' }
24])

1```yml
2# Configure your entities by adding them in config/packages/meilisearch.yaml
3meilisearch:
4    url: 'http://127.0.0.1:7700'
5    api_key: 'masterKey'
6    indices:
7        - name: movies
8          class: App\Entity\Movie
9```
10
11```php
12<?php
13// src/Controller/MoviesController.php
14namespace App\Controller;
15
16use App\Entity\Movie;
17use Doctrine\Persistence\ManagerRegistry;
18use Symfony\Component\HttpFoundation\Response;
19
20class MoviesController extends AbstractController
21{
22    #[Route('/add-movies', name: 'addMovies')]
23    public function addMovies(ManagerRegistry $doctrine): Response
24    {
25        $entityManager = $doctrine->getManager();
26
27        $movies = ['Carol', 'Wonder Woman', 'Life of Pi', 'Mad Max: Fury Road', 'Moana', 'Philadelphia'];
28
29        foreach ($movies as $title) {
30            $movie = new Movie();
31            $movie->setTitle($title);
32
33            $entityManager->persist($movie);
34        }
35
36        // Inserting data in your DB table will automatically update your Meilisearch index
37        $entityManager->flush();
38
39        //...
40    }
41}
42```