jquery 仿google 下拉表单插件

最新推荐文章于 2025-08-21 22:27:45 发布

sanshi0815

最新推荐文章于 2025-08-21 22:27:45 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery google div function list input

本文链接：https://blog.youkuaiyun.com/sanshi0815/article/details/2245269

本文介绍了一个基于jQuery的自定义下拉菜单插件的实现细节，包括如何响应键盘和鼠标事件、如何动态更新下拉选项等。该插件通过简单的API调用即可在页面上创建交互式的下拉选择框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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 >

< 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.youkuaiyun.com/sanshi0815

jquery 仿google 下拉表单 插件

jquery 仿google 下拉表单插件