现在的位置: 首页 > 综合 > 正文

jquery 仿google 下拉表单 插件

2013年03月08日 ⁄ 综合 ⁄ 共 4526字 ⁄ 字号 评论关闭

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

 

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=|| 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>20break;
                }

            }

        }

        
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
=|| 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>|| y-t>h)
            
{
                jQuery(
'#'+div_select_name).hide();
            }

        }
);
    }

    
//按键函数
    var input_down = function(e,valuestr)
    
{
        
var keyCode = getKeyCode(e);
        

抱歉!评论已关闭.