Question

以下是使用jquery进行实时/自动完成搜索的相关代码。我面临的问题是，每次输入字母时，它都会两次调用控制器。

我的JS代码

<script type="text/javascript">
    $(document).ready(
            function() {
                $('.tabs 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("live-search", {
                            term : inputVal
                        }).done(function(result) {
                            // Display the returned data in browser
                            console.log(result);
                            resultDropdown.html(result);
                        });
                    } 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>

我的HTML代码

<form class="simple-search-form">
    <div class="tabs">
        <ul>
            <li><a href="#tabs-1">All</a></li>
            <li><a href="#tabs-2">For Sale</a></li>
            <li><a href="#tabs-3">For Rent</a></li>
        </ul>
        <div id="tabs-1" class="ui-tabs-hide">
            <input type="text" autocomplete="off"
                placeholder="Enter an address or city..." /> <input
                type="submit" value="GO" />
        </div>
        <div id="tabs-2" class="ui-tabs-hide">
            <input type="text" autocomplete="off"
                placeholder="Enter an address or city..." /> <input
                type="submit" value="GO" />
        </div>
        <div id="tabs-3" class="ui-tabs-hide">
            <input type="text" autocomplete="off"
                placeholder="Enter an address or city..." /> <input
                type="submit" value="GO" />
        </div>
    </div>
</form>

有什么主意，为什么我每次键入一个字符都会被调用两次？

Answer 1

原因是为on（）函数指定了两个事件类型。键入字符时，将首先触发“输入”事件，然后触发“键”事件。尝试仅指定“输入”事件类型。

jQuery两次调用控制器进行实时搜索

1 个答案: