/**
* @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实现一个智能提示控件,以及该控件的使用方法和事件处理机制。此外,开发者还可以根据源代码来深入研究并进行自定义扩展,以适应不同场景下的需求。
本文将详细讲解如何使用jQuery的智能提示功能,以及如何在Visual Studio(VS)环境中实现这一功能。 **一、jQuery智能提示的原理** jQuery的智能提示主要依赖于`vsdoc`文件。`vsdoc`是一种特殊的JavaScript注释...
在这个项目中,“JQuery实现智能输入提示(仿机票预订网站)”是模拟机票预订网站中常见的功能——当用户在输入框中输入时,系统自动提供相关的城市或机场名称作为提示。这种功能大大提高了用户体验,减少了用户手动...
"jQuery智能提示文件(中文版+英文版)"是针对jQuery开发的一种增强用户交互体验的插件,它提供了一种高效的方法来实现下拉提示、自动完成等功能,提升用户在输入时的效率和便捷性。 **1. jQuery智能提示基本概念** -...
《Dreamweaver CS5实现jQuery智能提示》这篇文章主要探讨了如何在Adobe Dreamweaver CS5这个流行的网页设计工具中,启用并优化jQuery的代码提示功能,以提高开发效率。Dreamweaver作为一款强大的可视化编辑软件,它...
在本文中,我们将深入探讨如何使用JQuery实现输入框大写提示功能,这对于创建具有用户友好体验的登录界面尤其有用。JQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务,使得前端开发...
通常,这些智能提示文件是通过 jQuery 定义的.d.ts 类型定义文件实现的,VS 会解析这些文件来提供 JavaScript 的类型检查和智能感知。 在实际项目中,jQuery 与 jQuery UI 的结合使用可以帮助开发者快速构建响应式...
**jQuery 1.4.4 智能提示** jQuery 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。版本1.4.4是该库的一个早期版本,发布于2010年,尽管现在已经有更新的版本,但了解它...
《JQuery实现冒泡提示的技巧与应用》 在网页开发中,为了提供更好的用户体验,开发者经常需要在用户与页面元素交互时显示一些提示信息。jQuery的tips功能恰好能满足这一需求,它允许我们轻松地创建出具有冒泡效果的...
使用jQuery实现智能表单验证功能涉及前端开发的多个重要知识点,包括HTML表单元素的使用、CSS样式设计、JavaScript编程以及jQuery库的引入和应用。在接下来的内容中,我们将深入探讨这些知识点。 首先,HTML表单是...
【标题】"jsp智能提示完整版,jquery+ajax+text实现"揭示了这是一个关于Web开发的项目,主要涉及的技术栈是JavaServer Pages (JSP)、jQuery、Ajax以及文本处理。这个项目意在模仿百度的智能提示功能,即在用户输入时...
**jQuery Autocomplete 知识...综上所述,`jQuery Autocomplete` 是一个功能强大且灵活的插件,可以轻松地为网站添加智能提示功能。通过合理的配置和定制,它可以适应各种应用场景,提升用户在搜索和填写表单时的效率。
jQuery在实现Vs2008下智能提示【插件】.mht;vs2008 jquery提示补丁VS90SP1-KB958502-x86.exe;jquery-1.3.2-vsdoc2.js;jquery-1[1].3.2-vsdoc2.js都有
实现智能提示功能,主要涉及以下几个步骤: 1. **初始化插件**:在页面加载完成后,通过 jQuery 的 `$(document).ready()` 函数来绑定插件。设置插件的配置选项,如提示数据源(JSON 数据或 URL)、触发事件(如 `...
《jQuery城市智能提示选择插件解析与应用》 在当今的Web开发中,用户体验成为了衡量一个网站或应用程序质量的重要标准之一。为了提升用户在输入城市信息时的便捷性,jQuery城市智能提示选择插件应运而生。这款插件...
**jQuery智能搜索提示框**是基于JavaScript库jQuery实现的一种交互式搜索功能,它可以在用户输入时动态显示与输入内容匹配的建议结果。这种技术在网页应用中非常常见,可以极大地提升用户体验,使得用户能快速找到...
首先,我们来看标题中的"jquery-VS2008智能提示",这指的是在Visual Studio 2008中实现对jQuery库的代码智能提示功能。这一功能可以让开发者在编写代码时,自动获取jQuery方法和属性的建议,从而减少错误并提高编写...