Estoy usando el siguiente fragmento de código para pasar parámetros a la URL para que se pueda acceder a la búsqueda específica a través del enlace generado.
Por ejemplo, si se selecciona Potato , la URL cambia a example.com#potato
Sin embargo, en lugar de agregar la URL con un hash, quiero agregar ?filter=
Entonces, si se selecciona Potato , quiero que la URL cambie a example.com?filter=potato
¿Cómo puedo conseguir esto?
$(function() { $(".vegetables, .seasoning").on("change", function() { var hash = $(".vegetables:checked, .seasoning:checked").map(function() { return this.value; }).toArray(); hash = hash.join(","); location.hash = hash; }); if (location.hash !== "") { var hash = location.hash.substr(1).split(","); hash.forEach(function(value) { $("input[value=" + value + "]").prop("checked", true); }); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <h3>Filter recipes:</h3> <div> <p>Select vegetables</p> <label><input type="checkbox" class="vegetables" value="potato"> Potato</label><br> <label><input type="checkbox" class="vegetables" value="onion"> Onion</label><br> <label><input type="checkbox" class="vegetables" value="tomato"> Tomato</label><br> </div> <div> <p>Select seasoning</p> <label><input type="checkbox" class="seasoning" value="salt"> Salt</label><br> <label><input type="checkbox" class="seasoning" value="pepper"> Pepper</label><br> <label><input type="checkbox" class="seasoning" value="chilli"> Chilli Flakes</label><br> </div>Puede usar pushState() para actualizar la URL actual sin recargar la página:
$(".vegetables, .seasoning").on("change", function() { var values = $(".vegetables:checked, .seasoning:checked").map((i, el) => el.value).get(); window.history.pushState({}, '', `?filter=${values.join(',')}`); });