ys_auto_complete.css

.ys-auto-complete{
    position:absolute;
    display:none;
    list-style-type: none;
    padding:0;

    border:1px solid #ccc;
    margin:0;
    background-color:#fff;
    z-index:999;

}

.ys-auto-complete li{
    height:32px;
    line-height: 32px;
    font-size:14px;
    color:#222;
    padding-left:10px;
}

.ys-auto-complete li:hover{
    background-color:#eaeaea;
    cursor: pointer;
}

ys_auto_complete.js

(function($){

    var defaultSettings = {
        loadSource:function(keyWord,callback){ //
            //var data = [];
            //callback(this,data);
        }
    };

    function refreshAutoComplete(target,list){
        if(list==null||list.length==0){
            return;
        }
        var ys_auto_complete_id = $(target).attr("ys_auto_complete");
        var container = $("#"+ys_auto_complete_id);
        var html = "";
        // render the data
        list.forEach(function(item){
            var name = item.name;
            var value = item.value;
            html +="<li value='"+value+"'>"+name+"</li>";
        });
        container.html(html);

        // 计算auto_complete 坐标位置
        var top = $(target).offset().top+$(target).outerHeight()+1;
        var left = $(target).offset().left;

        container.css({
            "left":left+"px",
            "top":top+"px"
        });

        var ys_auto_complete_id = $(target).attr("ys_auto_complete");
        $("#"+ys_auto_complete_id).show();
    }

    var renderHtml =    "<ul class='ys-auto-complete'></ul>";


    function renderAutoComplete(target,settings){
        var id = "ys_auto_complete_"+new Date().getTime()+""+parseInt(Math.random()*10000);
        $(target).attr("ys_auto_complete",id);
        $(renderHtml).attr("id",id).appendTo("html"); // 添加到文档中去


        var container = $("#"+id);

        var width = $(target).outerWidth();

        container.css({
            "width":width+"px"
        });

        return container;
    }


    function bindEventHandlers(target,container,settings){
        var timeout = null;

        var loadSource = settings.loadSource;

        // 目标输入框键盘keypress事件
        $(target).on("keydown",function(e){
            e.stopPropagation();
            clearTimeout(timeout);
            console.log("-------------------------");
            timeout = setTimeout(function(){
               // load the data from backend
                var keyWord = $(target).val();
                loadSource.call(target,keyWord,refreshAutoComplete);
            },300);
        });

        // 点击空白区域 隐藏 auto_complete
        $(document).on("click",function(e){
            e.preventDefault();
            $(".ys-auto-complete").hide();
        });

        // 点击输入框 auto_complete 不隐藏
        $(target).on("click",function(e){
            e.stopPropagation();
            e.preventDefault();
        });

        // auto_complete item click 事件
        $(container).on("click","li",function(e){
            e.stopPropagation();
            e.preventDefault();
            var value = $(this).attr("value");
            var name = $(this).html("name");

            $(target).val(value);
            $(container).hide();
        });

    }



    var options = {
        ysAutoComplete:function(settings) {
            var mergedSettings = {};
            $.extend(mergedSettings,defaultSettings,settings);

            $(this).each(function(){
                var container = renderAutoComplete(this,mergedSettings);

                bindEventHandlers(this,container,mergedSettings);
            });
        }
    };
    $.fn.extend(options);
})(jQuery);

ys_auto_complete_demo.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../static/css/ys_ui_plugin/ys_auto_complete.css">

    <script src="../static/dist/js/jquery-1.11.3.min.js"></script>
    <script src="../static/js/ys_ui_plugin/ys_auto_complete.js"></script>
</head>
<body>
    <input type="text"/>



<script>
    $("input").ysAutoComplete({
            loadSource:function(keyWord,callback){
                var data = [
                                {value:"app",name:"Apple"},
                                {value:"bna",name:"Banana"},
                                {value:"org",name:"Orange"}
                            ];
                var that = this;

                callback(that,data);
            }
    });
</script>
</body>
</html>

wKiom1c9Ivygb1pwAAET2DL_a4Y512.jpg