Route form to route based on input?

Hii there,

I’m trying to make a search for my website.
Currently, I have added a simple form (in my navbar) like this:

<form class="form-inline my-2 my-lg-0" action="/blog/search/"> 
          <div class="input-group">
            <input class="form-control" name="query" type="search" placeholder="Search">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button">
                <i class="fa fa-search"></i>
              </button>
            </div>
          </div>
        </form>

As well as a route:

$routes->connect('/blog/search/:query',['plugin'=>null,'controller' => 'Blog', 'action' => 'display'])
      ->setPass(['query']);

Now, I want to pass the input of the search field to this route…
Any clues on how I could do this?

Decided to do this using javascript as it’s mostly a client-side issue.