首页 > 代码库 > 搜索输入框提示--输入延迟，仿自动脑学院

搜索输入框提示--输入延迟，仿自动脑学院

2024-08-17 23:36:33   220人阅读

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src=‘../node_modules/jquery/dist/jquery.min.js‘></script>
    <style>
    html,
    body {
        font-family: Arial, ‘microsoft Yahei‘;
    }
    
    ul,
    li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .znTipsBox {
        position: relative;
    }
    
    input.znTips {
        width: 120px;
        height: 23px;
        line-height: 23px;
        border-radius: 3px;
        border: 1px solid #ccc;
        padding: 3px 12px;
    }
    
    input.znTips:focus~ul {
        display: block;
    }
    
    .znTipsBox ul {
        position: absolute;
        left: 0;
        top: 31px;
        width: 100%;
        border: 1px solid #ccc;
        display: none;
    }
    
    .znTipsBox ul li {
        padding: 3px 12px;
        font-size: 12px;
        line-height: 23px;
        height: 23px;
    }
    
    .znTipsBox ul li:hover {
        background-color: #eab;
        cursor: pointer;
    }
    
    .znTipsBox.noResult ul li:hover {
        background-color: #fff;
    }
    
    .znTipsBox.noResult ul li {
        color: #000;
        text-align: center;
    }
    
    .znTipsBox ul li .seclecText {
        color: red;
    }
    </style>
</head>

<body>
    <div class="znTipsBox">
        <input type="text" class="znTips zn1" placeholder="请输入">
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="znTipsBox">
        <input type="text" class="znTips zn1" placeholder="请输入">
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="znTipsBox">
        <input type="text" class="znTips zn2" placeholder="请输入">
    </div>
    <script src=‘index.js‘></script>
</body>

</html>
(function($) {
    $.fn.inpTips_zd = function(opts) {
        /*
         功能：搜索提示，延时搜索
         dom为input的class，不同数据库或者不同字段用不同的class
         noresultText为默认的无搜索结果提示
         ajax_request为获取后台数据的方法，需要自己按这个结构
         {
          "code": 200,
          "data": [
                    {"name": "王五"}
                    {"name": "王五1"}
                  ]
         }
         res.code如果不等200或者数据读取失败则返回：
           callback(false, ‘这里写错误信息‘);
         仿自:动脑学院  
        */
        //默认参数  
        var defaults = {
                dom: ‘.zn1‘,
                noresultText: ‘没有搜索结果‘,
                ajax_request: function(callback) {
                    $.ajax({
                            url: ‘data.json‘,
                            type: ‘GET‘,
                            dataType: ‘JSON‘,
                            success: function(res) {
                                if (res.code === 200) {
                                    console.log(res.data)
                                    callback(res.data);
                                } else {
                                    callback(false, ‘这里写错误信息‘);
                                }
                            },

                        })
                        .fail(function(erro) {
                            callback(false, ‘这里写错误信息‘);
                        });
                }

            }
            //如果有设置值则引用设置值否则默认 
        this.options = $.extend({}, defaults, opts);

        if (!$(this.options.dom).length) return false;
        //声明公用变量名
        var $dom = $(this.options.dom),
            dom = this.options.dom,
            count = 1,
            maxTime = 2,
            parentBox = ‘.znTipsBox‘,
            noresultText = this.options.noresultText,
            ajax_request = this.options.ajax_request,
            time = setInterval(function() {
                count++;
            }, 1000);

        $dom.on(‘input‘, function() {
            var searchInp = $(this).val();
            var html = ‘‘,
                ulClass = dom + ‘_ul‘,
                self = this;
            ulClass = ulClass.substr(ulClass.indexOf(‘.‘) + 1);
            clear();

            time = setInterval(function() {
                count++;
                if (count >= maxTime) {
                    clear();
                    if ($(‘.‘ + ulClass).length) $(‘.‘ + ulClass).remove();
                    ajax_request(function(data) {

                        if (arguments[0] === false) {

                            if (arguments.length > 1) {
                                $(self).parent(parentBox).addClass(‘noResult‘).append(‘<ul class="‘ + ulClass + ‘"><li>‘ + arguments[1] + ‘</li></ul>‘);
                            } else {
                                $(self).parent(parentBox).addClass(‘noResult‘).append(‘<ul class="‘ + ulClass + ‘"><li>‘ + noresultText + ‘</li></ul>‘);
                            }
                            return false;
                        }

                        $.each(data, function(index, el) {
                            html += ‘<li>‘ + el.name + ‘</li>‘;
                        });
                        $(self).parent(parentBox).removeClass(‘noResult‘).append(‘<ul class="‘ + ulClass + ‘">‘ + html + ‘</ul>‘);
                        $(self).parent(parentBox).on(‘mouseover‘, ‘li‘, function(e) {
                            $(self).val(this.innerHTML);
                        })
                        if (!$(self).val()) {
                            $(‘.‘ + ulClass).remove();
                            html = ‘‘;
                        }
                    });
                }
            }, 1000)
            if ($(self).val()) {
                $(‘.‘ + ulClass).remove();
                html = ‘‘;
            }
        });
        //清除计时器
        function clear() {
            clearTimeout(time);
            count = 1;
        }
        clear();
    }
    $(document).inpTips_zd();
}(jQuery));



// 例子如下
/*
<div class="znTipsBox">
   <input type="text" class="znTips zn2" placeholder="请输入">
</div>
*/
$(document).inpTips_zd({
    dom: ‘.zn2‘,
    noresultText: ‘没有搜索结果‘,
    ajax_request: function(callback) {
        $.ajax({
                url: ‘data1.json‘,
                type: ‘GET‘,
                dataType: ‘JSON‘,
                success: function(res) {
                    if (res.code === 200) {
                        callback(res.data);
                    } else {
                        callback(false, ‘这里写错误信息‘);
                    }
                },

            })
            .fail(function(erro) {
                callback(false, ‘这里写错误信息‘);
            });
    }
});
{
    "code": 200,
    "data": [
        {
            "id":1,
            "name": "王五"
        },
        {
            "id":2,
            "name": "王五1"
        },
        {
             "id":3,
            "name": "王五2"
        }
    ]
}

 

搜索输入框提示--输入延迟，仿自动脑学院


联系
我们