Julian Krt Julian Krt - 5 months ago 30
Javascript Question

redirecting to a link after clicking on a mysql ajax dropdown menu

i'm working on a search menu with suggestion dropdown menu underneath it. Where if you click on the suggestion, you should redirect to the product.

Im currently using this code:

<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("./includes/backend-search.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
var link = 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();
window.location = link;
});
});
</script>


And here is my searchbox in html

<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search product..." />
<div class="result"></div>
</div>


I'm currently trying to open a link by using the window.location function in the onclick function. Where the link is set as a var from the data that's been suggested.

For so far it's not working, its not opening any links or so.
Has anyone a idea how to fix this?
Thanks, - Julian.

Answer Source

I think you want to achieve something like this. You have mistaken declaration for link. you should make it global declared. Hope it work for you.

$(document).ready(function(){
var link;
    $('.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){
           for(var i = 0; i<= 20; i++){
                var suggessions = "<p>" + i + "</p>";
                resultDropdown.html(suggessions);
                link = i;
            }
        } 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();
        console.log(link);
        window.location = link;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-box">
            <input type="text" autocomplete="off" placeholder="Search product..." />
            <div class="result"></div>
        </div>

The Actual Js Code you gone write is like this.

$(document).ready(function(){
    var link;
        $('.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("./includes/backend-search.php", {term: inputVal}).done(function(data){
            // Display the returned data in browser
            resultDropdown.html(data);
            link = 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();
            console.log(link);
            window.location = link;
        });
    });

This will work for you.