Is there a way to open a link in the same tab without refreshing?

Question

So I'm trying to make a search like Netflix's and to explain, when you type a letter, the link changes so it's like this search.php?search=* whatever the query is * and it doesn't refresh the page and here's my take so far:

search.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form id="form">
        <input type="text" id="search" placeholder="Search">
    </form>

    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable) { return pair[1]; }
            }
            return(false);
        }

        function getSearchQuery() {
            $.ajax({
                type : 'GET',
                url : 'functions/get.php',
                data: 'search=' + getQueryVariable("search"),

                success : function(html) {
                    $("#form").html(html);
                }
            });
        }

        $("#search").keyup(function(event) {
            var query = $('#search').val();
            event.preventDefault();
            location.replace('search.php?search=' + query);
        });
    </script>
</body>
</html>

get.php

<?php

    $search = isset($_GET['search']) ? $_GET['search'] : '';

    echo '<input type="text" id="search" placeholder="Search" value="'.$search.'">';

?>

So my only problem is that it refreshes. Is there any way to stop it from refreshing and only update the link above?

Does this answer your question? [Updating address bar with new URL without hash or reloading the page](https://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-the-page) — IncredibleHat, Jun 17 '20 at 13:47

score 1 · Answer 1 · answered Jun 18 '20 at 00:58

You are going to the URL and overwriting your page in the browser history wih it. (I assume this is the location on the window object being accessed.)

location.replace('search.php?search=' + query);

You should use either window.location.hash and handle the editing within the hashchanged (hashchange?) event, or just drop the # stuff and handle the contents manually.

Might want to manually trace how it works ... also, what if someone instead clicks the search button?

Is there a way to open a link in the same tab without refreshing?

1 Answers1