スプリングタイメレフMVCでフォーム検索？

Question

私のサイトには、データベースから抽出した製品のリストがあり、結果はselect/optionの単純なリストに集約されています。今度は、オートコンプリートと呼ばれる複数単語の検索フォームでこれを変更したいと思います。

これは私の選択/オプションリストです：

$("#Product").change(function(){ 
 
\t var webProductId = $(this).find(':selected').attr('data-webProductId'); 
 
\t var requestData = { webProductId: webProductId }; 
 
\t yada.ajax([[@{/product/list}]], requestData, function(responseText, responseHtml) { 
 
\t $('div.sinVotoInner').replaceWith(responseHtml); 
 
\t yada.initHandlersOn(responseHtml); 
 
});

<select id="wsProduct"> 
 
    <option value="Products" id="Product" selected>Product</option> 
 
    <option th:each="webProduct : ${webProducts}" 
 
\t th:attr="data-webProductId=${webProduct.id}" 
 
\t th:text="|${webProduct.name} ${webProduct.description}|">Product 1 Description 1</option> 
 
\t \t \t </select>

これは私のホームコントローラです：

@RequestMapping("/") 
 
\t public String home(Model model) { 
 
\t \t 
 
\t \t List<WebProduct> webProducts = webProductRepository.findByEnabledTrueOrderByNameAsc(); 
 
\t \t model.addAttribute("webProducts", webProducts); 
 

 
\t \t return "/home"; 
 
\t }

そしてこれが私ですリポジトリ：

List<WebLocation> findByEnabledTrueOrderByNameAsc(); 
 

 
\t /** 
 
\t * @param productId 
 
\t * @return 
 
\t */ 
 
\t @Query(value="select * from WebProduct wp where wp.product_id = :productId", nativeQuery = true) 
 
\t WebProduct findByProductId(@Param("productId") long productId);

どのように取り組んで検索フォームを含めるには、このコードを変更できますか？検索は、入力した単語に対応していなければならず、検索フォーム（Googleなど）にも検索候補が表示されます。

Answer 1

解決策は以下のとおりです。

List<WebProduct> webProducts = webProductRepository.findByWord("%"+word+"%");

クエリ：

@Query(value="select * from WebProduct wp where wp.name like :word or wp.description like :word", nativeQuery = true) 
 
\t List<WebProduct> findByWord(@Param("word") String word);