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

这对你有用。

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

1 个答案: