Добавить параметр в URL, чтобы сделать поисковый фильтр

Question

Привет, я хочу переписать значения параметров URL по щелчку флажка, аналогично поиску Amazon.фильтр я пробую этот код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript1.2">
$(document).ready(function () {
  $('input[type=checkbox]').click(function (e) {
  var seasoning = '', tempArray = [];
  $('input[name="vegetables[]"]:checked').each(function(){
      tempArray.push($(this).val());
  })
  if(tempArray.length !== 0){
     seasoning+='vegetables='+tempArray.toString();
     tempArray = [];
  }
  
  $('input[name="seasoning[]"]:checked').each(function(){
      tempArray.push($(this).val());
  })
  if(tempArray.length !== 0){
     seasoning+='&seasoning='+tempArray.toString();
  }
 
 //window.location ='http://localhost/sss.php?'+seasoning;
console.log('http://localhost/sss.php?'+seasoning);

  });

});

</script>

<div>
<p>Select vegetables</p>
<label><input type="checkbox" name="vegetables[]" value="potato"> Potato</label><br>
<label><input type="checkbox" name="vegetables[]" value="onion"> Onion</label><br>
<label><input type="checkbox" name="vegetables[]" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" name="seasoning[]" value="salt"> Salt</label><br>
<label><input type="checkbox" name="seasoning[]" value="pepper"> Pepper</label><br>
<label><input type="checkbox" name="seasoning[]" value="chilli"> Chilli Flakes</label><br>
</div>

но он работает только в консоли, я не могу исправить его для запуска в URL, я хочу добавить параметр в URL

Answer 1

1. Если у вас все в порядке с обновлением окна, вам нужно сделать

Использование document.location.search += seasoning обновляет страницу.

2. Если вы не хотите, чтобы окно обновлялось, вы можете использовать window.location pushState или replaceState.

window.history.replaceState(null, null, 'http://localhost/sss.php?'+seasoning);

или

window.history.replaceState(null, null, 'http://localhost/sss.php?'+seasoning);

$(document).ready(function () {
 $('input[type=checkbox]').click(function (e) {
  var seasoning = '', tempArray = [];
  $('input[name="vegetables[]"]:checked').each(function(){
      tempArray.push($(this).val());
  })
  console.log(tempArray);
  if(tempArray.length !== 0){
     seasoning+='vegetables='+tempArray.toString();
     tempArray = [];
  }
  $('input[name="seasoning[]"]:checked').each(function(){
      tempArray.push($(this).val());
  });
  if(tempArray.length !== 0){
     seasoning+='&seasoning='+tempArray.toString();
  }
  console.log('http://localhost/sss.php?'+seasoning);
 });
});

<div>
<p>Select vegetables</p>
<label><input type="checkbox" name="vegetables[]" value="potato"> Potato</label><br>
<label><input type="checkbox" name="vegetables[]" value="onion"> Onion</label><br>
<label><input type="checkbox" name="vegetables[]" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" name="seasoning[]" value="salt"> Salt</label><br>
<label><input type="checkbox" name="seasoning[]" value="pepper"> Pepper</label><br>
<label><input type="checkbox" name="seasoning[]" value="chilli"> Chilli Flakes</label><br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>