using search functionality in thymeleaf with reque

I have a page where I get a list of entries. Now, I want to be able to search from those list.

my current url for retrieving list is this /show/products. I want to add a search form in this page so that I can search with request parameter. Yes, I can use ajax but I have to do it with request parameters.

So if I search for a product name, then - /show/products?name=someName

<form ui-jp="parsley" th:action="@{/show/products(name=${pName})}" th:object="${pName}" method="get">
    <div class="row m-b">
        <div class="col-sm-6">
            Search by Name:
            <input id="filter" type="text" th:field="*{pName}" class="form-control input-sm w-auto inline m-r"/>
            <button class="md-btn md-fab m-b-sm indigo">
                <i class="material-icons md-24">&#xe8b6;</i>
            </button>
        </div>
    </div>
</form>

And this is what I tried in controller:

@GetMapping("/show/products")
public String getProduct(Model model,
                         @RequestParam(required = false) String name,
                         @ModelAttribute String pName) {

    List<Product> products = this.productService.getAllProducts(name)
    model.addAttribute("products", products);
    return "show_product";
}

I am getting this error:

Neither BindingResult nor plain target object for bean name 'pName' available as request attribute
    at org.springframework.web.servlet.support.BindStatus.<init>(BindStatus.java:153)
    at org.springframework.web.servlet.support.RequestContext.getBindStatus(RequestContext.java:897)

You are trying to use variable pName (Model attribute) as a form object.

In your view you are passing a model attribute to form like this th:object="${pName}" but instead you need to pass a form object.

A form object is not a class but rather a simple java object (POJO). You can think of form object as your form but on server side.

Before you can use form object in your view, you need to create it and add it to the Model.

you will define it like this

public class MyFormObject{
    private String pName;
    public String getPName(){
        return pName;
    }
    public void setPName(String pName){
        this.pName = pName;
    }
}

now your controller method will become

@GetMapping("/show/products")
public String getProduct(Model model,
    @ModelAttribute("myFormObject") MyFormObject myFormObject,
    BindingResult result) {
    List<Product> products = this.productService.getAllProducts(myFormObject.getPName());
    model.addAttribute("products", products);
    return "show_product";
}

Then you can pass the form object to your form like this

                       <form ui-jp="parsley" th:action="@{/show/products}" th:object="${myFormObject}" method="get">
                            <div class="row m-b">
                                <div class="col-sm-6">
                                    Search by Name: <input id="filter" type="text" th:field="*{pName}" class="form-control input-sm w-auto inline m-r"/>
                                    <button class="md-btn md-fab m-b-sm indigo"><i class="material-icons md-24">&#xe8b6;</i></button>
                                </div>
                            </div>
                        </form>

You need to read the documentation, all these are explained there in detail.