title: Form search with spring thymeleaf MVC?
body: <p>In my site I have a list of products extracted from a database, the results are aggregated into a simple list with select / option. Now I would like to change this with a multi-word search form with the word autocomplete.</p>
  
  <p>This is my select/option list:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#Product").change(function(){
   var webProductId = $(this).find(':selected').attr('data-webProductId'); 
   var requestData = { webProductId: webProductId };
   yada.ajax([[@{/product/list}]], requestData, function(responseText, responseHtml) {
   $('div.sinVotoInner').replaceWith(responseHtml);
   yada.initHandlersOn(responseHtml);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="wsProduct"&gt;
    &lt;option value="Products" id="Product" selected&gt;Product&lt;/option&gt;
    &lt;option th:each="webProduct : ${webProducts}"
   th:attr="data-webProductId=${webProduct.id}"
   th:text="|${webProduct.name} ${webProduct.description}|"&gt;Product 1 Description 1&lt;/option&gt;
     &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my home controller:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@RequestMapping("/")
   public String home(Model model) {
    
    List&lt;WebProduct&gt; webProducts = webProductRepository.findByEnabledTrueOrderByNameAsc();
    model.addAttribute("webProducts", webProducts);
  
    return "/home";
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And this is my repository:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>List&lt;WebLocation&gt; findByEnabledTrueOrderByNameAsc();
  
   /**
    * @param productId
    * @return 
    */
   @Query(value="select * from WebProduct wp where wp.product_id = :productId", nativeQuery = true)
   WebProduct findByProductId(@Param("productId") long productId);</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I change this code to include a working search form? Search must work for any word you've entered and search suggestions (such as google) appear in the search form.</p>