I am using Search API, Search API autocomplete and Solr search. I'we made a view with an exposed filer that has a funcionality of search api autocomplete.

For now, autocomplete suggestions are just this boring regular template...

Important to notice is also that I am searching two Content Types (Book and Autor)

I would like to implement grouping in my autocomplete suggestion so that my autocomplete looks like this:

Book:     |    Autor
Book 1    |    Autor n
Book 2    |    Autor n
Book 3    |    Autor n
Book 4    |    Autor n
Book 5    |    Autor n
Show all      Show all

1 Answer 1


One way to do this requires you to get a bit javaScript-ey

As normal Drupal autocomplete uses "https://jqueryui.com/autocomplete/"

or a wrapper of it see "core/misc/autocomplete.js"

You can do is take 100% control over it. you can add JS to the view and optionally create a controller to handle better "label" : "value"

      source: function (request, response) {
        var url = '/the-ajax-end-point'; 
       // or custom Controller returning JasonResponse() :)

       // or custom view with rest Response :)
          dataType: "json",
          type : 'Get',
          data: {
            q: request.term
          url: url,
          success: function(data) {
            // play with grouping the data here.
            response( data );
          error: function(data) {
            // do some thing here.
      select: makeSelectAwesome,
      minLength: 3,

   function makeSelectAwesome(e, ui) {
    if (ui && e) {
      if (ui.item) {
        // ui.item.value, ui.item.label
        // in the case of your own controller
        // you can return a whole crap load more stuff
        // Then just label / value 
        // Example var data = JSON.parse(ui.item.value);

       // php excerpt for controller ideas
       $request = $this->requestStack->getCurrentRequest();
       $query = $request->get('q');
       /// build a result.
       $value = [
         'type' => $node->getType(),
         'image_url' => $node->field_image ... 
         'extra_data_to_make_ui_awesome' => []

       $results[] = [
         'value' => json_encode($value, TRUE),
         'label' => $node->getTitle(),
       return new JsonResponse($results, 200);

then i guess you just live the dream.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.