jquery 仿google 下拉表单 插件

这个东西，我弄了很久才行，很头大

 

jQuery.noConflict();
sanshi_tip  =   function (divName)
... {
    //输入框是否被选中
    var input_is_have = false; 
    //加载的div
    var tipDiv = divName;
    //输入框的名字
    var div_input_name = tipDiv+"_input";
    var div_select_name = tipDiv+"_select";
    var div_hidden_name = tipDiv+"_hidden";
    var selectCss = "selectCss";
    var notSelectCss = "notSelectCss";
    //下拉表单的css样式
    var select_item_class = "selected";
    //定义下拉div样式
    var select_div_class = "div_select";
    //添加下拉表单的项
    var addItem = function(str,num)
    ...{
        var input =  jQuery(document.createElement("DIV"));
        input.attr('id',div_select_name+"_"+num);
        input.attr('list',num);
        input.text(str);
        input.mousemove(function()...{
            //判断是否有被选中的
            if(jQuery("#"+div_select_name+" ."+selectCss).attr('id'))
            ...{
                jQuery("#"+div_select_name+" ."+selectCss).removeClass(selectCss);
                jQuery("#"+div_select_name+" ."+selectCss).addClass(notSelectCss);
            }
            //设置当前背景色
            jQuery(this).removeClass(notSelectCss);
            jQuery(this).addClass(selectCss);
            
            select_is_have=true;
            jQuery(this).focus();
        });
        //设置鼠标过去后的效果
        input.mouseout(function(e)...{
            jQuery(this).removeClass(selectCss);
            jQuery(this).addClass(notSelectCss);
            select_is_have=false;
            });
        //设置点击效果
        input.click(function()...{
            jQuery('#'+div_input_name).val(jQuery(this).text());
            jQuery('#'+div_select_name).hide();
            jQuery('#'+div_input_name).focus();
        });
        return input;
    }
    //建立下拉菜单函数
    var buildList=function(arr)
    ...{
        jQuery('#'+div_select_name).html("");
        for(i=0;i<arr.length;i++)
        ...{
            jQuery('#'+div_select_name).append(addItem(arr[i],i));
        }
        
        if(jQuery("#"+div_select_name+" > div").size() > 0)
        ...{
            jQuery('#'+div_select_name).show();
        }else...{
            jQuery('#'+div_select_name).hide();
        }
    }
    //取得键值函数
    var getKeyCode=function(e)...{e=e || window.event;return e.keyCode;};
    //数据检查函数
    var checkData=function(str)
    ...{
        var title = fundArr;
        var temp = new Array();
        for(j=0;j<title.length;j++)
        ...{
            var sstr = title[j];
            if(str!="")
            ...{
                var len = sstr[0].indexOf(str);
                // 代码  中文  拼音
                if(sstr[0].indexOf(str) == 0 || sstr[1].indexOf(str) == 0 || sstr['fundpinyin'].indexOf(str) == 0)
                ...{
                    temp.push(title[j][1]);
                //控制显示条数
                    if(temp.length>20) break;
                }
            }
        }
        return temp;
        //jQuery("#"+div_select_name).show();
        //jQuery("#"+div_select_name).text(temp.join('|'));
    }
    //初始化函数
    var init=function()
    ...{
        var inputo = jQuery(document.createElement("input"));
        inputo.attr('type',"text");
        inputo.attr('id',div_input_name);
        //按键弹起事件
        inputo.keyup(function(e)...{input_down(e,jQuery(this).val());});
        inputo.click(function(e)...{input_down(e,jQuery(this).val());});
        //获得焦点事件
        inputo.focus(function()...{input_is_have=true;});
        //失去焦点事件
        //inputo.blur(function(){});
        //
        jQuery("#"+tipDiv).append(inputo);
        var inputo2 = jQuery(document.createElement("DIV"));
        inputo2.attr('id',div_select_name);
        inputo2.attr('class',select_div_class);
        inputo2.hide();
        jQuery("#"+tipDiv).append(inputo2);

        var inputo3 = jQuery(document.createElement("input"));
        inputo3.attr('type',"hidden");
        inputo3.attr('id',div_hidden_name);
        inputo3.attr('value',"");
        //inputo3.val("");
        jQuery("#"+tipDiv).append(inputo3);

        jQuery('body').click(function(e)...{
            e=e || window.event;
            var w = document.getElementById(div_select_name).offsetWidth;
            var h = document.getElementById(div_select_name).offsetHeight;
            var l = document.getElementById(div_select_name).offsetLeft;
            var t = document.getElementById(div_select_name).offsetTop;
            var x = e.clientX ;
            var y = e.clientY ;
            if(x-l>w || y-t>h)
            ...{
                jQuery('#'+div_select_name).hide();
            }
        });
    }
    //按键函数
    var input_down = function(e,valuestr)
    ...{
        var keyCode = getKeyCode(e);
        
        if(jQuery('#'+div_hidden_name).val()==""||jQuery('#'+div_hidden_name).val() != valuestr)
        ...{
            var itemArr = checkData(valuestr);
            buildList(itemArr);
            jQuery('#'+div_hidden_name).val(valuestr);
        }
        
        var inputArr = jQuery("#"+div_select_name+" > div");
        
        if(!jQuery("#"+div_select_name+" ."+selectCss).text())
        ...{
            var list = 0;
            jQuery(inputArr.get(list)).removeClass(notSelectCss);
            jQuery(inputArr.get(list)).addClass(selectCss);
        }
        if(keyCode==40)
        ...{
            if(inputArr.size() > 0)
            ...{
                var list = parseInt(jQuery("#"+div_select_name+" ."+selectCss).attr('list'))+1;
                var list2 = list-1;
                if(list>=inputArr.size()) list = 0;
                jQuery(inputArr.get(list2)).removeClass(selectCss);
                jQuery(inputArr.get(list)).removeClass(notSelectCss);
                jQuery(inputArr.get(list)).addClass(selectCss);
            }
        }
        if(keyCode==38)
        ...{
            if(inputArr.size() > 0)
            ...{
                
                var list = parseInt(jQuery("."+selectCss).attr('list'))-1;
                var list2 = list+1;
                if(list <= 0) list = 0;
                jQuery(inputArr.get(list2)).removeClass(selectCss);
                jQuery(inputArr.get(list)).removeClass(notSelectCss);
                jQuery(inputArr.get(list)).addClass(selectCss);
            }
        }
        if(keyCode==13)
        ...{
            var list = parseInt(jQuery("#"+div_select_name+" ."+selectCss).attr('list'));
            jQuery('#'+div_input_name).val(jQuery(inputArr.get(list)).text());
            jQuery('#'+div_select_name).hide();
        }
        if(input_is_have && keyCode==13)
        ...{
            jQuery('#'+div_select_name).hide();
        }else...{
            jQuery('#'+div_select_name).show();
            if(inputArr.size() <= 0)
            ...{
                jQuery('#'+div_select_name).hide();
            }
        }
    }
    init();
}

 代码使用

 

< script > ...


jQuery("document").ready(function()...{
    new sanshi_tip("sanshi2");
    new sanshi_tip("sanshi3");
    new sanshi_edit("sanshiedit1","editable","my_edit.php");
});

</ script >
< div  id ="sanshi2" >
</ div >
< p >
< p >
< p >
< p >
< p >
< p >
< p >
< div  id ="sanshi3" >
</ div >

我这里使用的是json的数据，而且是提前生成好的，如果你需要修改数据方式只要修改

var checkData=function(str) 这个函数就可以了

addItem = function(str,num) 这个函数是往下拉表单里添加内容

http://phpitem.com/search.php   查看效果

作者 叁石  sanshi0815
mail sanshi0815@tom.com

blog : http://blog.csdn.net/sanshi0815