ransack. How to convert parameters into a semantic URL?

Question

JavaScript

Hello.
There is one filter (ransack), which leaves minced meat from the parameters after filtering

http://localhost:3000/search?utf8=%E2%9C%93&q%5Barticul_cont%5D=&q%5Bcolor_id_eq%5D=10&q%5Bcatalog_id_eq%5D=&q%5Bbrand_id_eq%5D=&q%5Bcost_gt%5D=&q%5Bcost_lt%5D=&commit=Search

such parameters need to be reworked into something like

http://localhost:3000/search/Nokia/Finland/plastic/black

At the same time, some parameters may be missing and the following options may be obtained:
http://localhost:3000/search/black
http://localhost:3000/search/Finland
There is something similar on SOF: stackoverflow.com/a/31807092/3258840
but there it is proposed to add more parameters, which will increase the length of the url.
How should the route look like?
Are there js libraries for this purpose?

Answer 1

One of the ways to solve the problem.
On the server side, generate a url from everything that is in params[:q], pass the url as a parameter to js and substitute it there instead of what is

$(document).ready ->
  history.pushState('', 'New Page Title', gon.absolute_url)

# роут для фильтра
get '/search/*filter', to: 'wallpapers#search', as: 'filter'

I used gon
to pass the paren. For a readable url - frendly_id