How to append search values to url using Jquery?

Question

I have a function in my app where in I do filter the list of products where in the user has to select some filters and thne submit it. Now what i want to achieved is append those selected values to the url without refreshing it and be able to achived the url sample below based on the selected filters. Thank you

My question is different there is no possible duplicates.

my current url is , now when search keys is passed those search keys will be appended to that url without the page being reloaded

http://localhost:3002/new

HTML

<div class="search-btn">

                    <button id="searchVechicle" type="button" class="btn btn-primary btn-sm">Search</button>
                  </div>

Data

https://i.stack.imgur.com/RO1DR.jpg

sample Output I wanted to achieved

https://test.com/searchnew.aspx?Year=2020,2019&Model=EcoSport,Edge,Escape,Super%20Duty%20F-350%20SRW&Pricerange=10001-20000,20001-30000

Filter input

 $('.filter-content input').on('click',function(e){
        var el = $(this);
        var val = el.val();
        var propName = el.data('prop');

        if (!filters[propName])
            filters[propName] = [];

        if(el.prop("checked")){
            filters[propName].push(val);
        }else{
            $.each(filters, function(pname, item){
                if(propName == pname)
                    filters[propName].splice(item.indexOf(val.toString()),1);
            })
        }
        console.log("Filters", filters)

    })

displaying selected filters

var displaySelectedFilters = function(){

        console.log("Display" , filters)

        var selectedFiltersEl = '', filtersWrapper = $('#selected-filters');
        filtersWrapper.empty();

        $.each(filters, function(pname, f){
            var selectedItem = '', removeLink = '';

            removeLink = '<a href="#" title="Remove ' + pname + ' filter" class="removeFilterProp"> <i class="fas fas- fa-trash-alt"></i></a>';

            $.each(f, function(i, item){
                var removeItem = '<a href="#" data-prop="' +pname+ '" data-item="'+ item +'" title="Remove ' + item + '"> <i class="fas fas- fa-times"></i></a>';

                selectedItem += '<span>' + item + removeItem + '</span>';
            });

            selectedFiltersEl += "<div class='filter-item'>" + pname + ": " + selectedItem + removeLink + "</div>";
        });

        filtersWrapper.prepend(selectedFiltersEl);
    }

which API are you using to make rest service? A cleaner way is to pass the search params as the parameters Like this `axios.get('/user', { params: { ID: 12345 } }) ` if you are using axios — BhaskerYadav, Oct 24 '19 at 05:55
im not sure you can use commas in a URL? typically the format for parameters is `?key=value&key2=value2&key3=value3` etc — oldboy, Oct 24 '19 at 06:02
have a look at https://api.jquery.com/jquery.get/. The `data` attribute is what you'll require — BhaskerYadav, Oct 24 '19 at 06:04

score 0 · Answer 1 · answered Oct 24 '19 at 06:21

For manipulate URL you can use a library (like this link -> it is a very lightweight library). And of course for show them in url without refreshing, you must know how to work with browser's history (there are some libraries for that too). For an example of navigation see this link from Mozilla.

EDIT:

As vijayP mentioned in comment, you can see this link for more information too.