So, I have a search bar on my site:
<form action="" method="GET" class="form-inline justify-content-center">
<input type="text" id="s_bar2" name="search" size = "75" class="form-control mr-sm-2" aria-label="Search">
<input class="btn btn-outline-primary my-2 my-sm-0" type="submit" value="Search">
</form>
And after a search is executed, I maintain the query in the bar by pulling it from the URL using this script:
<script type="text/javascript">
var elem = document.getElementById("s_bar2");
const urlParams = new URLSearchParams(window.location.search);
elem.value = urlParams.get('search');
</script>
However, the previous query only appears in the search box for a few milliseconds before vanishing. I have pinpointed the issue to my script:
$(document).ready(function() {
$("#s_bar2").autocomplete({
source: "/policy_suggest/"
});
});
But I cannot figure out how to resolve it. I use the script for suggesting queries while the user is typing. Why does it cause my updated value to disappear? I have tried moving around this and my first script for loading the previous query value, but nothing is working.