I need to create a page in Drupal 8 where there is a text field and a search button. When the user has entered a word to search and hit the search button a list with a search result should be displayed.

The search should go against this endpoint: https://example.com/api/json/1.0/searchProduct.json?query=[SEARCHWORD] Where [SEARCHWORD] is replaced with for example Stockholm and results are shown.

If more than 5 results are shown a pager should show up.

Have search the internet for tips or solutions, but couldn't find anything.. Is there anyone who has a clue that can point me in the right direction?


Hello since you are new to Drupal Answers I'll help you get started, but in future this type of question is way to specific and a self directed learning approach is better.

Well here we go this will get you pointed in the direction you need.

First: you need to find out how to make a custom module (quite easy) suggested google search "How to make Drupal 8 Module" -- then take you pick

-- option 1) (do it in a form with AJAX)

1.A) you need to find out how to make a form suggested google search "How to make Drupal 8 form" - (read and understand) https://www.drupal.org/docs/8/api/form-api/introduction-to-form-api

1.b) in that form create a text field. called "search"

1.c) Search Google for "drupal 8 ajax form example" -- (read and understand) https://www.drupal.org/docs/8/api/javascript-api/ajax-forms

1.d) in the form ajax call back:

 // example 
 $url = 'http://systembevakningsagenten.se/api/json/1.0/searchProduct.json?query=';
 $term = $form_state->getValue('search');
 $query_url = $url. $term;
 $client =  \Drupal::httpClient();
 $request = $client->get($query_url);
 $data = json_decode($request->getBody(), TRUE);
 $results = [];
 if (!empty($data) && !empty($data['items'])) {
   foreach ($data['items'] as $item ) {
     $results[] = $item['name'];

at this point $results is what you want to display .. if you did step "1.c" it will be easy for you.

-- or -- Option 2 Do it in JS

2.a) Learn how and create a controller aka https://www.drupal.org/docs/8/creating-custom-modules/adding-a-basic-controller

2.b) Learn about drupal 8 add js to controller aka read and understand https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module

  • Key points: Defining a library (your_module.libraries.yml)

    Attaching a library to page (controller) $build['#attached']['library'][] = 'your_module/library_name';

2.c) Read https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview

2.d) once you have a controller with some custom js file attached then, you can use mark up from controller to create the form, and use js to make the calls and update the markup.

-- or -- Option 3) do this in a block

2.a) find out how to make a block aka Google "Drupal 8 how to make a block"

2.c) use above options to deliver the functionality you require.

And with that this will get you started ! if not point you in the correct direction of how to.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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