`
mniz
  • 浏览: 31010 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jquery 实现智能提示

阅读更多
/**
 * @author zhangxq
 * @param  inputid
 * 输入框的ID  
 * 初始化里面的keyword 为输入框的ID
 */

//{border-top:1px dashed #cccccc;height: 1px;overflow:hidden;}
$(document).ready(function(){
	$("#keyword").css({"padding":"5px 8px 2px 6px","height":"24px","font-size":"large","border":"solid","border-width":"1px thin  thin 1px","border-color":"#CCCCCC #999999 #999999 #CCCCCC"});
	$("#keyword").attr("title","搜罗搜索");
});
var key_value  = 0;//键盘对应的值
InTellMsg	= function  (inputid ,arr) {
	  removediv();
	  inputid  = "#"+inputid;
	  var width = $(inputid).outerWidth();
	  var input_postion =  $(inputid).position();
	  var table =  $("<table></table>").attr("id","msg_table");
	  $("#msg_table").css({"border":"solid 1px red"});
	  var cur_value = 0;
	  var mouse_cur_value = 0;
	  var flag ="true";
	  var pre_flag = "next";
	  $("<div ></div>").attr("id","intellmsgdiv").appendTo(document.body);
	  $("#intellmsgdiv").css({"width":width-2,"vertical-align":"top","height":"auto",
		  "position":"absolute","left":input_postion.left,"top":input_postion.top+29+"px",
		  "margin-top":"-1px","z-index":"100","border":"solid", "border-color":"#A2BFF0 #558BE3 #558BE3 #A2BFF0","border-width":"1px","overflow":"hidden"});  
	
	  $("#intellmsgdiv").append(table);
	  var num =arr.length;
	  for(var i=0;i< arr.length ;i++){
	  	$("#msg_table").append("<tr  height='25px' style='font-size: 18px;'><td style='padding-left:8px;'>"+arr[i]+"</td></tr>");
	  }
//	  $("#msg_table").css({"width":(width+3)+"px", "border":"10px"});
	  $("#msg_table").css({"background":"white","width":(width+3)+"px","margin":"-2px -3px -2px -2px","overflow":"hidden"});
	  
	  $("#msg_table tr").hover( 
	  		  function () {
	  		  	  if(flag =="true"){
		  		  	  var trs =  table.children().children();
		  		  	  var index = cur_value-1 ;
		  		  	  if(cur_value== 0 ){
		  		  	  	 index =  0;
		  		  	  }
				      $(trs[index]).addClass("tr_off");
		  		  	  $(trs[index]).removeClass("tr_on");
				 		
				  	  $(this).addClass("tr_on");
				  	  $(this).removeClass("tr_off");
				  	  cur_value = $(this).index() ; 
				  	  mouse_cur_value = $(this).index() ; 
			  	  }
			  },
			  function (){
			     $(this).addClass("tr_off");
			  	 $(this).removeClass("tr_on");
			  }
		);
	  document.onkeydown   =  function(event){
		  	var currdiv = document.getElementById('intellmsgdiv');
		  	event = (event) ? event : window.event;
		  	key_value  = event.keyCode ;
			var key =  event.keyCode ;
			var trs =  table.children().children();
			var index =0;
			var tds;
			var tr_num =  trs.length ;
			if(key=='40'){
				
				if(pre_flag=="pre"){
					cur_value ++;
				}
				pre_flag ="next";
				flag = "false";
				 
				$(trs[mouse_cur_value]).addClass("tr_off");
				$(trs[mouse_cur_value]).removeClass("tr_on");
				
				if(cur_value!= tr_num ){
					
					$(trs[cur_value -1]).addClass("tr_off");
					$(trs[cur_value -1]).removeClass("tr_on");
				} 
				
				$(trs[cur_value]).addClass("tr_on");
				$(trs[cur_value]).removeClass("tr_off");
				
				 cur_value ++;
				 if(cur_value>tr_num){
				 	cur_value = tr_num ;
				 }
				 
				 // 这个计算和下面的计算放置的位置不一样,所以会出现不同的结果
			 	if(cur_value==0){
					index = cur_value;
				}else if(cur_value==tr_num){
					index = tr_num -1;
				}else{
					index = cur_value -1 ;
				}
			 	tds = $(trs[index]).children();
			 	if(currdiv!=null){
			 		$(inputid).val($(tds[0]).text());//set value
			 	}
			}else if(key =='38'){
				
				if(pre_flag=="next"){
					cur_value  --;
				}
				
				pre_flag = "pre";
				if(cur_value == tr_num){
					index = tr_num -1;
				}else if(cur_value == 0){
					index = cur_value;
				}else{
					index = cur_value -1 ;
				}
				
				if(cur_value != 0){
					$(trs[cur_value]).addClass("tr_off");
					$(trs[cur_value]).removeClass("tr_on")
				}
				
				$(trs[cur_value -1]).addClass("tr_on");
				$(trs[cur_value -1]).removeClass("tr_off");
				
				cur_value --;
				if(cur_value < 0){
				 	cur_value = 0 ;
				 }
				tds = $(trs[index]).children();
				if(currdiv!=null){
					$(inputid).val($(tds[0]).text());//set value
				}
			}
			flag = "false";
			
			
			
		};
		$("#msg_table").bind("mousemove",function(event){
			flag = "true";
		});
		$("#msg_table td").bind("click",function(event){
			$(inputid).val($(this).text());
		});
 			
}
removediv = function(){
	$("#intellmsgdiv").remove();
}

document.onclick = function(){
	removediv();
}


searchIntell = function(inputid ,inputval){
	if(key_value ==38 || key_value ==40 || key_value == 37 || key_value == 39|| key_value == 16){
		return false;
	}
	 var v =  $("#"+inputid).val();
	 if(v==null || v==""){
		 return false;
	 }
	 var arr = new Array(10);
	 for(var i=0;i<10;i++){
		 arr[i]=i;
	 }
	 InTellMsg(inputid,arr);
}



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.tr_on {background-color:#D5E2FF;height:25px;}; 
	.tr_off {background-color:white;height:25px;};
</style>
  <script type="text/javascript" src="jquery1.4.js"></script>
  <script type="text/javascript" src="test.js"></script>
</head>
<body>
		<center>
			<form action="./searchpicture.do" id="form1" method="get" >
					 <input type="text" autocomplete="off" id="keyword" style="width:500px" value="" name ="keyword"   onkeyup="searchIntell('keyword',this.value);" />
					<input type="button" value="搜索搜索"   >  
			</form>
		</center>
</body>
</html>


PS:本人样式是在差,需要的朋友可以自行修改
  • 大小: 10.6 KB
分享到:
评论

相关推荐

    基于jquery实现智能提示控件intellSeach.js

    通过以上内容,开发者可以了解如何基于jQuery实现一个智能提示控件,以及该控件的使用方法和事件处理机制。此外,开发者还可以根据源代码来深入研究并进行自定义扩展,以适应不同场景下的需求。

    JQUery的智能提示

    本文将详细讲解如何使用jQuery的智能提示功能,以及如何在Visual Studio(VS)环境中实现这一功能。 **一、jQuery智能提示的原理** jQuery的智能提示主要依赖于`vsdoc`文件。`vsdoc`是一种特殊的JavaScript注释...

    JQuery实现智能输入提示(仿机票预订网站)

    在这个项目中,“JQuery实现智能输入提示(仿机票预订网站)”是模拟机票预订网站中常见的功能——当用户在输入框中输入时,系统自动提供相关的城市或机场名称作为提示。这种功能大大提高了用户体验,减少了用户手动...

    jquery智能提示文件(中文版+英文版)

    "jQuery智能提示文件(中文版+英文版)"是针对jQuery开发的一种增强用户交互体验的插件,它提供了一种高效的方法来实现下拉提示、自动完成等功能,提升用户在输入时的效率和便捷性。 **1. jQuery智能提示基本概念** -...

    Dreamweaver CS5实现jquery智能提示

    《Dreamweaver CS5实现jQuery智能提示》这篇文章主要探讨了如何在Adobe Dreamweaver CS5这个流行的网页设计工具中,启用并优化jQuery的代码提示功能,以提高开发效率。Dreamweaver作为一款强大的可视化编辑软件,它...

    JQuery实现输入框大写提示

    在本文中,我们将深入探讨如何使用JQuery实现输入框大写提示功能,这对于创建具有用户友好体验的登录界面尤其有用。JQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务,使得前端开发...

    jquery和jqueryUI最新1.7.3(含vs智能提示文件)

    通常,这些智能提示文件是通过 jQuery 定义的.d.ts 类型定义文件实现的,VS 会解析这些文件来提供 JavaScript 的类型检查和智能感知。 在实际项目中,jQuery 与 jQuery UI 的结合使用可以帮助开发者快速构建响应式...

    Jquery1.4.4 智能提示

    **jQuery 1.4.4 智能提示** jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。版本1.4.4是该库的一个早期版本,发布于2010年,尽管现在已经有更新的版本,但了解它...

    jquery_tips,JQ实现的冒泡提示

    《JQuery实现冒泡提示的技巧与应用》 在网页开发中,为了提供更好的用户体验,开发者经常需要在用户与页面元素交互时显示一些提示信息。jQuery的tips功能恰好能满足这一需求,它允许我们轻松地创建出具有冒泡效果的...

    使用JQuery实现智能表单验证功能

    使用jQuery实现智能表单验证功能涉及前端开发的多个重要知识点,包括HTML表单元素的使用、CSS样式设计、JavaScript编程以及jQuery库的引入和应用。在接下来的内容中,我们将深入探讨这些知识点。 首先,HTML表单是...

    jsp智能提示完整版,jquery+ajax+text实现

    【标题】"jsp智能提示完整版,jquery+ajax+text实现"揭示了这是一个关于Web开发的项目,主要涉及的技术栈是JavaServer Pages (JSP)、jQuery、Ajax以及文本处理。这个项目意在模仿百度的智能提示功能,即在用户输入时...

    jquery-autocomplete 智能提示

    **jQuery Autocomplete 知识...综上所述,`jQuery Autocomplete` 是一个功能强大且灵活的插件,可以轻松地为网站添加智能提示功能。通过合理的配置和定制,它可以适应各种应用场景,提升用户在搜索和填写表单时的效率。

    jquery+vs2008智能提示包

    jQuery在实现Vs2008下智能提示【插件】.mht;vs2008 jquery提示补丁VS90SP1-KB958502-x86.exe;jquery-1.3.2-vsdoc2.js;jquery-1[1].3.2-vsdoc2.js都有

    jquery 智能提示插件

    实现智能提示功能,主要涉及以下几个步骤: 1. **初始化插件**:在页面加载完成后,通过 jQuery 的 `$(document).ready()` 函数来绑定插件。设置插件的配置选项,如提示数据源(JSON 数据或 URL)、触发事件(如 `...

    jquery城市智能提示选择插件下载

    《jQuery城市智能提示选择插件解析与应用》 在当今的Web开发中,用户体验成为了衡量一个网站或应用程序质量的重要标准之一。为了提升用户在输入城市信息时的便捷性,jQuery城市智能提示选择插件应运而生。这款插件...

    jquery智能搜索提示框

    **jQuery智能搜索提示框**是基于JavaScript库jQuery实现的一种交互式搜索功能,它可以在用户输入时动态显示与输入内容匹配的建议结果。这种技术在网页应用中非常常见,可以极大地提升用户体验,使得用户能快速找到...

    jquery-VS2008智能提示

    首先,我们来看标题中的"jquery-VS2008智能提示",这指的是在Visual Studio 2008中实现对jQuery库的代码智能提示功能。这一功能可以让开发者在编写代码时,自动获取jQuery方法和属性的建议,从而减少错误并提高编写...

Global site tag (gtag.js) - Google Analytics