jquery插件--仿google下拉表单 - 星辰.Net技术社区论坛

最新文章文章系列索引社区标签 JQuery频道

JQuery频道 >

jquery插件--仿google下拉表单

时间: 2008-04-15 23:02

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));
}

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) 这个函数是往下拉表单里添加内容

1 / 1 页

1

跳转页

作者
star65225692

添加至收藏夹

添加至收藏夹

浏览:443

版权所有星辰.Net技术社区论坛 Sitemap GoogleSitemap 简洁版本

网站备案:沪ICP备08100262号

返顶部