javascript - 单击 mysql ajax 下拉菜单后重定向到链接

Question

我正在开发一个搜索菜单，其下方有建议下拉菜单。如果您点击建议，您应该重定向到产品。

我目前正在使用此代码:

<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>

这是我的 html 搜索框

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

我目前正在尝试使用 onclick 函数中的 window.location 函数打开链接。其中链接被设置为来自建议数据的 var。

到目前为止，它还没有工作，没有打开任何链接等等。 有谁知道如何解决这个问题？ 谢谢，-朱利安。

Answer 1

我认为您想要实现这样的目标。您错误地声明了链接。你应该将其声明为全局的。希望它对您有用。

$(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>

您编写的实际 Js 代码是这样的。

$(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;
        });
    });

这对你有用。