jquery ui autocomplete 模拟百度搜索自动提示

程序员旭昇技术 2022年11月16日

0 收藏 540 点赞 4,244 浏览 1409 个字

直接上代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>autocompate</title>
    <link rel="stylesheet" href="static/themes/default/bootstrap.min.css" rel="external nofollow" >
    <link rel="stylesheet" href="static/themes/default/jquery.ui.css" rel="external nofollow" >    <script src="static/script/jquery.js"></script>
    <script src="static/script/jquery.ui.js"></script></head>
<body>
支持上下箭头选择检索项目。<br>
<input id="keywords" name="keywords" type="text" class="form-control" placeholder="请输入关键字"
       style="width:350px;margin:100px 0px 0px 100px"><script type="text/javascript">
    $(document).ready(function () {
        var cache = {};
        $("#keywords").autocomplete({
            minLength: 0,//最小长度触发搜索
            delay: 300,//延迟事件来触发
            autoFocus: true,//初始化以后自动设置焦点 默认为false
            //appendTo:"#someElem",//初始化组件搜索结果appendTo目标元素
            //source: words
            //source: "static/json_data/search.json",
            source: function (request, response) {
                var term = request.term;
                if (term in cache) {
                    response(cache[term]);
                    return;
                }
                var seachParam={};
                if($(this.element).prop("name")){
                    seachParam[$(this.element).prop("name")]=term;
                }else{
                    seachParam.search_keywords=term;
                }
                $.ajax({
                    url: "static/json_data/search.json",
                    dataType: "json",
                    data: seachParam,
                    success: function (data) {
                        cache[term] = data;
                        response(cache[term]);
                    }
                });
            },
            focus: function (event, ui) {
                return false;
            },
            select: function( event, ui ) {
                $(this).blur();
            }
        }).focus(function () {
            if ($(this).data("uiAutocomplete") && $(this).data("uiAutocomplete").menu.element)
                $(this).data("uiAutocomplete").menu.element.show();
        });    })</script></body>
</html>