Search bar on click go to link

Question

I have a search bar which suggests users from a database. Currently when clicking on a username nothing really happens, the username goes to the searchbar, but how do i make it so that when clicking the username it goes to a link and adds the username behind it.

example: www.test.com/user.php?u= ((the username))

<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });

    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>

Answer 1

You can navigate to a page by changing the window.location.href value. So, you could do something like:

$(document).on("click", ".result p", function(){
    $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
    $(this).parent(".result").empty();
    window.location.href = 'www.test.com/user.php?u=' + $(this).text();
});