做的一个基于jquery的联想输入的特效框架，类似于百度、google的输入-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

做web应用的基本都会用到联想输入，近期在项目中出现以下需求：
1、有多个地方用到了联想输入，而且是多个开发者，从而导致一个开发者写一个联想输入的js，代码冗余不说，各自还存在不同的bug，其中一个严重的bug是在ie的低版本下有卡死浏览器的bug。
2、原本想找一个jquery的联想输入框架，但是搜索了下，没有找到。
我的联想输入框架实现的基本结构：
通过配置不同的参数，来调整不同的实现（目前还没有做样式的配置，后期有时间再做吧！）

var config={}
config.inputObj = "#search_input";//inputObj 目标输入框
config.url = "http://www.0xiao.com/";//请求联想数据的链接,响应的数据格式必须是一个json格式的数组，每一个数据项必须有一个name项；如[{name:'张三'},{name:'张四'}，{name:'张五'}，。。。]
$.htw_associate(config);//返回联想对象，多个联想就配置多个config

当然如果你的需求更复杂，我为你提供了更详细的接口
config.inputObj// 目标输入框
config.showCnt//联想显示个数
config.url//为getData函数使用，用于获取数据，如果重写了getData，则此属性无效
config.associateDiv//联想div 联想框
config.width//默认为 obj.inputObj 对象的宽度,在后面注入
config.offsetX;//联想框的偏移量
config.offsetY;
config.minInterval;//两次请求的最小间隔时间（毫秒）
config.getData;//获取数据的主函数
config.submitData//提交数据的回调
config.selectData//选择一个联想数据项的回调
config.position//定位
config.setData//成功请求数据后，需要把数据注入到对象中

最后再贴上源码，欢迎拍砖哦！

$.extend({
    htw_associate : function(config) {
        var random = new Date().getTime();
        var htw_associate_div_id = "htw_associate_div_"+random;
        var div = "<div style='position:absolute;display:none;background-color:#fff;border:1px solid #ccc;overflow-x:hidden;' id='"+htw_associate_div_id+"'></div>";
        $("body").append(div);
        var obj = {};
        obj.inputObj = "#htw_input";// 目标输入框
        obj.showCnt = 10;//联想显示个数
        obj.url = "";//为getData函数使用，用于获取数据，如果重写了getData，则此属性无效
        obj.associateDiv = $("#"+htw_associate_div_id);
        obj.width = undefined;//默认为 obj.inputObj 对象的宽度,在后面注入
        obj.offsetX = 0;//联想框的偏移量
        obj.offsetY = 5;
        obj.minInterval = 200;//两次请求的最小间隔时间
        obj.setData = function(data,obj){//成功请求数据后，添加数组数据
            if(!obj){
                obj = this;
            }
            var array = [];
            if(data){
                array = data;
            }
            $(obj.inputObj).data("htw_data",array);
        };
        obj.getData = function(val,obj){//请求数据，如果数据结构不一样，或者有更复杂的业务，你应该重写此函数
            var associateObj = this;
            var param = {};
            param['htw_associate_key'] = val;
            $.post(associateObj.url,param,function(list){
                if(list && list.length > 0){
                    associateObj.setData(list);
                    associateObj.associateDiv.show();
                    associateObj.associateDiv.empty();
                    for(var i = 0;i<list.length && i<associateObj.showCnt;i++){
                        var data = list[i];
                        var str = "<div style='cursor: pointer;padding:2px 10px;'>" + data.name + "</div>";
                        associateObj.associateDiv.append(str);
                    }
                }
            });
        };
        obj.submitData = function(data,obj){};//提交函数
        obj.selectData=function(data,divObj,obj){//选择了其中一个联想数据
            var name = divObj.text();
            if(data && data.name){
                name = data.name;
            }
            $(obj.inputObj).val(name);
        };//选择了数据
        obj.position = function(obj){//定位
            if(!obj){
                obj = this;
            }
            var position = $(obj.inputObj).position();
            obj.associateDiv.css('left',position.left+obj.offsetX);
            obj.associateDiv.css('top',position.top+$(obj.inputObj).height()+obj.offsetY);
            obj.associateDiv.width(obj.getWidth(obj));
        };
        obj.getWidth=function(obj){//获取宽度
            if(!obj){
                obj = this;
            }
            var width = $(obj.inputObj).width();
            if(obj.width){
                width = obj.width;
            }
            return width;
        };
        if(config){
            for ( var key in config) {
                obj[key] = config[key];
            }
        }
        obj.position(obj);
        $("#"+htw_associate_div_id+" div").live("mouseover",function(){
            $("#"+htw_associate_div_id+" div").css("background", "#fff");
            $(this).css("background", "#efeeff");
            var i = $(this).index();
            $(obj.inputObj).data("htw_associate_index",i);
        });
        $("#"+htw_associate_div_id+" div").live("click",function(){
            var i = $(this).index();
            $(obj.inputObj).data("htw_associate_index",i);
            var datas = $(obj.inputObj).data("htw_data");
            obj.selectData(datas[i],$(this),obj);
            obj.associateDiv.hide();
        });
        $(obj.inputObj).keyup(obj.keyupfn);
        $(obj.inputObj).blur(obj.blurfn);
        $(window).resize(function(){
            obj.position(obj);
        });
        return obj;
    },
});

转载于:https://my.oschina.net/u/1244507/blog/150519