JS 搜索提示

  1. 考虑中文输入问题
  2. 考虑输入的时间间隔,不一直请求后端,1 s 内的输入请求一次。

<!DOCTYPE html>
<html>
<head>
    <title>search auto complete</title>
</head>
<script
  src="http://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<body>
    <form id="search_form" action="" method="get">
        <div class="field-set">
            <div class="input-box">
                <input type="search" id="search" name="q" placeholder="Search" maxlength="255" class="searchText input-text required-entry" autocomplete="off"/>
            </div>
            <div class="action">
                <button type="submit"><span>Submit</span></button>
            </div>
            <ul id="autocomplete_terms_ul">
            </ul>
        </div>
    </form>
</body>
<style>
    #autocomplete_terms_ul {
        position: absolute;
        background: white;
        display: block;
        width: 270px;
        z-index: 999;
        color: #333;
        moz-box-shadow:2px 2px 5px #555;
        -webkit-box-shadow:2px 2px 5px #555;
        box-shadow: 2px 2px 5px #555;
        border: 1px solid #ededed8c;
        padding: 5px 0px;
        display: none;
    }
    #autocomplete_terms_ul li{
        padding: 8px 10px;
        cursor: pointer;
    }
    #autocomplete_terms_ul li:hover{
        background-color: #e6e6e691;
    }
    #autocomplete_terms_ul li span{
        float:right;
    }
</style>
<script>
jQuery(document).ready(function() {
    var $ = jQuery,
        timeout,
        flag = true,
        searchInput = $('#search'),
        searchForm = $("#search_form"),
        suggestBox = $("#autocomplete_terms_ul"),
        url = "http://autocomplete/";

    var doQuery = function (url, keyward) {
        // return $.ajax({
        //     type: "POST",
        //     url: url,
        //     data: {prefix: keyward, count:10},
        //     success: function (response) {
        //         showSuggestBox(JSON.parse(response));
        //     }
        // });
        var response = [{"KW":"apple", "QR":"10"},{"KW":"banana", "QR":"7"}];
        showSuggestBox(response);
    };

    var hideSuggestBox = function() {
        suggestBox.html('');
        suggestBox.hide();
    };

    var showSuggestBox = function(terms) {
        if (terms.length){
            var html = '';
            $.each(terms, function (key, val) {
                html = html + '<li>' + val.KW + '<span>'+ val.QR +'</span></li>';
            });
            suggestBox.html(html);
            suggestBox.show();
        }
    };

    searchInput.bind('compositionstart', function () {
        flag = false;
    }).bind('compositionend', function () {
        flag = true;
        // compositionend 在 input 之后触发
        $(this).trigger('input');
    }).bind('input', function () {
        var keyword = $(this).val();
        if (flag) {
            if (keyword) {
                clearTimeout(timeout);
                timeout = setTimeout(
                    function () {
                        doQuery(url, keyword);
                    }, 1000);
            } else {
                // important
                clearTimeout(timeout);
            }
        }
        hideSuggestBox();
    });

    suggestBox.on('click', 'li', function () {
        var suggest = $(this).clone().children().remove().end().text();
        searchInput.val(suggest);
        hideSuggestBox();
        setTimeout(function () {
            searchForm.submit();
        }, 500);
    });

});
</script>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注