javascript - jquery 调用 Controller 两次进行实时搜索

Question

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

我的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() 函数指定了两种事件类型。当输入一个字符时，“input”事件将首先被触发，然后“keyup”事件将被触发。尝试仅指定“输入”事件类型。