Symfony : Do not know how to display algolia searchbar

Hello, I followed the algolia guide on how to implement a searchbar on a symfony project. https://www.algolia.com/doc/framework-integration/symfony/getting-started/algolia-searchbundle/?language=php

What I’ve done ?

  • installed algolia bundle with composer require algolia/search-bundle:4.0.0
  • enable bundle in bundles.php
  • added API ID and API KEY in .env
  • configured config/packages/algolia_search.yaml with my indices
  • added * @Groups({"searchable"}) on my concerned attributes imported my
  • imported my indices with bin/console search:import;
  • configured my indices on the dashboard

Here’s my SearchController :

namespace App\Controller;

use App\Entity\Idea;
use Algolia\SearchBundle\SearchService;
use Symfony\Component\HttpFoundation\Request;
use Algolia\SearchBundle\Responses\SearchServiceResponse;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class SearchController extends AbstractController
{

    /*protected $searchService;
    public function __construct(SearchServiceInterface $searchService)
    {
        $this->searchService = $searchService;
    } */
    
    
    public function search(Request $request) {

        $em = $this->getDoctrine()->getManagerForClass(Idea::class);
        $posts = $this->searchService->search($em, Idea::class, 'query');
    }
}

So now, I have no idea how to display the searchbar and make it effective ?
Can someone guide me with those steps ?

Hi Enzo!

Once your setup with Symfony is done, you can check that part of our documentation to see how to integrates Algolia with InstantSearch.

Hope that helps!

Hi chloe,

I saw this doc and tried to follow it, but I’m lost. First I tried to install instantsearch with yarn thanks to yarn add instantsearch.js . But it is not working, however I used cdn links, and tried some stuff but this is going no where. This is why I would like to have some steps to follow.

Hi Enzo,

Now you have two options:

  1. Server Side Search.

  2. Client Side Search.

For the Client Side Search, you will need a search-only API Key. Head to your Algolia dashboard and go to the API keys section.

Then, you should follow the documentation about Building Search UI.

Good luck,
Nuno

Hi @nuno.maduro,

so I managed to display a searchBar and searches work, the “hits” div below the searchbar updates. Now I have to share these informations between the request I got and my controller to pass them to my view. How can I do that ?
Thanks.

What options did you followed? Server side search or client side search?

I did client side search, thanks to this :

const searchClient = algoliasearch(‘APP_KEY’, ‘API_KEY’);

const search = instantsearch({
indexName: ‘dev_ideas’,
searchClient,
});

search.addWidgets([
searchBox({
container: “#search-box
}),

hits({
container: “#hits
})
]);

search.start();

but I would like to make server side works, I have this controller. But I do not know how to pass data from the searchbar to the controller…

class SearchController extends AbstractController
{

protected $searchService;

public function __construct(SearchService $searchService)
{
    $this->searchService = $searchService;
}

public function search(Request $request) {

    $em = $this->getDoctrine()->getManagerForClass(Idea::class);
    $ideas = $this->searchService->search($em, Idea::class, 'query');

    /*
    $ideas = $this->searchService->search($em, Idea::class, 'query', [
        'page' => 0,
        'hitsPerPage' => 10,
        'filters' => 'comment_count>10'
    ]);

    $ideas = $this->searchService->count(Idea::class, 'query');
    */
}

}

Plus, how can I just retrieve all objectId from the search ?
Here’s what I get :
Capture d’écran 2020-06-15 à 14.21.29

Is there an option to get all objectId from the returned search ?

Hi Enzo,

I can’t have both server-side search mixed with a client-side search using instantsearch.

Why would you like to have a server-side search if your client-side search is working?

You can also apply filters, and search parameters with instantsearch using the configure widget: https://www.algolia.com/doc/api-reference/widgets/configure/js/.

Let me know how it goes,
Nuno.

Sorry @nuno.maduro, let me make it clear.
I would like to have, a server-side search because I have a complex view with many others plugins. So I can’t let algolia handle the view for me.

Hey @Enzo,

Got it. At the time of this writing, we don’t have a tutorial on how to combine Instantsearch with your backend in Symfony.

how can I just retrieve all objectId from the search?

Maybe you can use transformItems to get access to the list of “objectIds” returned by Algolia: algolia.com/doc/api-reference/widgets/hits/js/#widget-param-transformitems.

Nuno.

Ok, this is why i’m struggling to make it operational. I did a lot of research and got nothing to help me with this. So I guess I have to make my own searchbar, ignoring InstantSearch. However, this not might be a problem.
Once I’ll pass the string of my search to my controller like ‘test’, how would I make the link with algolia ? I think that the doc is not that explicit.
And then, how do i retrieve all of the data from my search ?

Concerning transformitems, do you have any further advice ? I don’t get, how can i managed to add this this kind of code

transformItems(items) {
return items.map(item => ({
…item,
name: item.name.toUpperCase(),
}));
}

to my existing code

const search = instantsearch({
  indexName: 'dev_ideas',
  searchClient,
});

search.addWidgets([
  searchBox({
    container: "#search-box"
  }),

  hits({
    container: "#hits",
  })
]);

search.start();

I apologize for the time consuming @nuno.maduro , I try to do my best for days now.

Hey Enzo,

So I guess I have to make my own searchbar

Yes, if you go with server side search this is the best way to go.

Once I’ll pass the string of my search to my controller like ‘test’, how would I make the link with algolia ?

Well, you would pass the “test” search string to your search service like so:

$mySearchString = // query my search string from request.

$ideas = $this->searchService->search($em, Idea::class,  $mySearchString, [
     'page' => 0,
     'hitsPerPage' => 10,
     'filters' => 'comment_count>10'
]);

// re-render the view with the search hits.

Then you would re-render your view with this $ideas variable.

Concerning transformitems, do you have any further advice ? I don’t get, how can i managed to add this this kind of code

Again, I am not sure if this is a good idea, but you can use transformItems this way:

search.addWidgets([
  searchBox({
    container: "#search-box"
  }),

  hits({
    container: "#hits",
    transformItems(items) {
        // In case you need the objectID
        var objectID = item.objectID;

        return items.map(item => ({
            …item,
            name: item.name.toUpperCase(),
        }));
    }
  })
]);

Good luck,
Nuno