类型百度的输入框自动输入功能
2014-07-24 15:39
190 查看
js:
html:
$(function(){ RegisterKeyUp(); RegisterKeyDownUp(); RegisterFocusOut(); ClickGetValue(); }) //提示框是否显示 var isShow=false; //注册按键弹起事件 function RegisterKeyUp(){ $("#txtMobileTypeID").keyup(function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e.keyCode!="37" && e.keyCode!="38" && e.keyCode!="39" && e.keyCode!="40" && e.keyCode!="13"){//屏蔽方向键 if($.trim($("#txtMobileTypeID").val())!=""){ //异步获取内容 SetContent(); } else{ ClearContent(); hideBox(); }//38 40 } }) } //注册失去焦点事件 function RegisterFocusOut(){ $("#txtMobileTypeID").click(function(){ hideBox(); }) } //隐藏结果框 function hideBox(){ $("#content").parent().hide(); isShow=false; } //展示结果框 function showBox(){ currentIndex=0; $("#content").parent().show("flow"); isShow=true; } //获取内容 function SetContent(){ ClearContent(); $.post("ajax.aspx",{Action:"GetMobTypeContent",mobclassid:$("#ddlstMobileClassID option:selected").val(),lt:$("#txtMobileTypeID").val()},function(data){ if(data!=""){ $("#content").html(data); //显示 AutoHeight(); showBox(); //设置第一个选中 SelectItem($("#content li").eq(0)); //SetValue(); } else{ ClearContent(); hideBox(); } }) } //清空内容 function ClearContent(){ $("#content").html(""); } //监听上下方向键 var currentIndex=0; function RegisterKeyDownUp(){ $("#txtMobileTypeID").keydown(function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e.keyCode=="38" || e.keyCode=="40" || e.keyCode=="13"){ var lis=$("#content li"); var len=$(lis).length; if(len>0){ if(e.keyCode=="38"){//up if(currentIndex>0){ if(currentIndex>0) currentIndex--; SelectItem($(lis).eq(currentIndex)); } else{ currentIndex=len-1; SelectItem($(lis).eq(currentIndex)); } SetValue(); AutoScrollUp(); } if(e.keyCode=="40"){//down if(currentIndex<len-1){ if(currentIndex<len-1) currentIndex++; SelectItem($(lis).eq(currentIndex)); } else{ currentIndex=0; SelectItem($(lis).eq(currentIndex)); } SetValue(); AutoScrollDown(); } if(e.keyCode=="13"){//回车 触发查询事件 if($.trim($("#txtMobileTypeID").val())!=""){ //alert("查询结果!"); hideBox(); //$("#c_btnQuery").click(); } } } } }) } //设置选中项 function SelectItem(obj){ $("#pp li").removeClass("cc"); $(obj).addClass("cc"); GetFocus(); } function SetText(txt){ $("body p").eq(0).text(txt); } //设置输入框焦点 function GetFocus(){ $("#txtMobileTypeID").focus(); } //设置输入框的值 function SetValue(){ $("#txtMobileTypeID").val($("#pp .cc").eq(0).text()); } //自动适应高度 function AutoHeight(){ var len=$("#pp li").length; var hei=22*len; if(hei<300){ $("#pp").css("height",hei+"px"); } else{ $("#pp").css("height","300px"); } } //点击项并获取值 function ClickGetValue(){ $("#pp li").live("click",function(){ SelectItem($(this)); var currentitem=GetCurrentSelect(); $("#txtMobileTypeID").val($(currentitem).text()); currentIndex=GetItemIndex($(currentitem)); }) } //div内容自动向下滚动 function AutoScrollDown(){ if($("#pp .cc").length!=0){ var currentindex=GetCurrentIndex(); var itemcount=currentindex+1; if($("#pp").scrollTop()>=itemcount*22){//如果是最下面就到第一个 $("#pp").scrollTop(0); } if(itemcount*22>($("#pp").scrollTop()+300)){//如果当前项被遮住了就滚动滚动条 $("#pp").scrollTop($("#pp").scrollTop()+22*13); } next=0; } } //div内容自动向上滚动 var next=0; function AutoScrollUp(){ if($("#pp .cc").length!=0){ var currentindex=GetCurrentIndex(); var itemcount=currentindex+1; if(currentindex==0){//如果是最上面就到最后一个 next=1; } if((currentindex+1)==$("#pp li").length && next==1){ $("#pp").scrollTop(100000); next=0; } if(itemcount*22<=$("#pp").scrollTop()){//如果当前项被遮住了就滚动滚动条 $("#pp").scrollTop($("#pp").scrollTop()-22*13); } } } //获取一个元素的index function GetItemIndex(obj){ return $("#pp li").index($(obj)); } //获得当前选中项 function GetCurrentSelect(){ return $("#pp .cc").eq(0); } //获取当前选中项的index function GetCurrentIndex(){ return GetItemIndex(GetCurrentSelect()); }
html:
<style type="text/css"> .cc{background-color:red;} #content li{list-style:none; width:200px;} </style> <body> <p></p> <div style="margin-left:auto; margin-right:auto;position:relative;"> <div> <input id="Text1" style="width:200px;" type="text" /> </div> <div id="pp" style="position:absolute;display:none; border:solid 1px black; width:204px;"> <ul id="content" style="margin:0; padding:0; width:200px;"> </ul> </div> </div> </body>
相关文章推荐
- 实现textbox对输入内容的自动检索功能,效果相当于百度首页的文本输入框
- WPF实现TextBox输入文字后自动弹出数据(类似百度的输入框)
- ASP.NET实验五:实现输入内容提示的功能(仿google_百度输入框提示)
- WPF 之 实现TextBox输入文字后自动弹出数据(类似百度的输入框)
- 输入文字自动筛选--类似百度的功能(onchange与oninput和 onpropertychange 两者的区别)
- Java----input输入框输入自动联想数据源的功能
- 类似百度输入框自动联想功能遇到的问题:Opera浏览器不支持拼音输入法时的keyup事件
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- bootstrap实现的类似百度搜索的输入框自动完成功能(动态获取数据库的值)
- 基于javascript实现仿百度输入框自动匹配功能
- WPF 之 实现TextBox输入文字后自动弹出数据(类似百度的输入框)
- ASP.NET实验五:实现输入内容提示的功能(仿google_百度输入框提示)
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- JS实现仿百度输入框自动匹配功能的示例代码
- jquery实现的类似百度搜索的输入框自动完成功能
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- 仿百度输入框自动匹配功能的JS代码
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件