<script src="jquery-1.3.2.js"></script>
<style>*{font-size:12px;}</style>
<script>
var index = -1;
$.fn.extend({
ajaxtips:function(param){
var key = {down:40,up:38,enter:13,esc:27}; //键值
var rs = param.resultSet.split(","); //结果集
var text = $("#"+param.textid); //文本对象
var os = text.position();
$("#tipsdiv").remove(); //清除div对象
text.after("<div id='tipsdiv'></div>");
var paterdiv = $("#tipsdiv");
var divwidth = text.outerWidth(true);
paterdiv.css({
background : "#fff",
position : "absolute",
left : os.left+"px",
border : "1px solid #000",
width : divwidth+"px",
top : text.outerHeight(true) + os.top-1+ "px"
});
$.each(rs,function(i,n){
var value ="<div style='word-break:break-all;overflow:hidden;' id=tipsdiv"+i; //设置样式,自动换行
value += " onmouseover =index="+i+";$('#tipsdiv').children().css({'background':'#fff','color':'#000'});"
value += "$(this).css({'background':'#3165CE','color':'#fff'});";
value += " onmouseout =$(this).css({'background':'#fff','color':'#000'});";
value += " onclick = $('#tipsdiv').css('display','none');$('#"+param.textid+"').val($(this).text());> ";
value += "<span style='margin-left:2px'>"+ n + "</span></div>";
$("#tipsdiv").append(value);
});
var lenght = rs.length;
var out = $('#tipsdiv'+index).trigger("onmouseout");
switch(window_event().keyCode){
case key.up :
if(index <= 0) index = lenght ;
var divup = $('#tipsdiv'+(index-1));
out;
divup.trigger("onmouseover");
text.val(divup.text());
break;
case key.down :
if(index >= lenght-1) index = -1;
var divdown = $('#tipsdiv'+(1+index));
out;
divdown.trigger("onmouseover");
text.val(divdown.text());
break;
case key.enter :
case key.esc: paterdiv.css("display","none");
};
}
})(jQuery);
//firefox||ie下获取event(事件的状态)
function window_event(){
if(document.all){
return window.event;
}
var caller = window_event.caller;
while(caller!=null){
var argument = caller.arguments[0];
if(argument){
var temp = argument.constructor;
if(temp.toString().indexOf("Event")!=-1){
return argument;
}
}
caller = caller.caller;
}
return null;
}
$(document).ready(function(){
$('#text').keyup(function(){
$(this).ajaxtips({
resultSet:"a1,a2,a3,a4sssssssssssssssssssssssssssssssssssssssssss",
textid:"text"
});
});
});
</script>
<input id="text" type="text" /><br/>
分享到:
相关推荐
**jQuery自动补全插件详解** 在Web开发中,用户界面的交互性和便捷性是提升用户体验的关键因素之一。其中,自动补全功能是一项常见的需求,它可以在用户输入时提供预测建议,大大加快输入速度,降低错误率。jQuery...
**jQuery自动补全插件详解** jQuery 自动补全插件是一种常见的前端开发工具,它为用户在输入框中提供动态建议,提高了用户体验,尤其在处理大量数据输入时显得尤为重要。本示例将涵盖如何使用jQuery实现自动补全...
jQuery AutoComplete 是一个非常流行的前端插件,它为输入框提供了自动补全的功能,极大地提升了用户在网页上的输入体验。这个插件基于 jQuery 库,因此,使用前需要先引入 jQuery。AutoComplete 的主要功能是根据...
3. 配置选项:jQuery自动补全插件提供了丰富的配置选项,如`minLength`用于设置触发自动补全的最小字符数,`select`则是用户选择建议项时的回调函数,可以根据需要进行定制。 实际应用中,jQuery自动补全功能广泛...
**jQuery自动补全插件详解:仿百度自动提示功能** 在网页开发中,为了提高用户体验,经常需要实现一种类似于搜索引擎的自动补全功能,让用户在输入框中输入内容时能够实时得到相关的建议或提示。jQuery作为一款广泛...
**jQuery自动补全插件详解** 在Web开发中,用户界面的交互性和便捷性是提升用户体验的关键因素之一。jQuery库以其简洁的API和强大的功能深受开发者喜爱,而jQuery的自动补全插件则是提高输入效率、优化用户体验的...
**jQuery 自动补全插件详解** 在网页开发中,为用户提供自动补全功能是一种常见的交互设计,可以提高用户体验,减少用户输入错误。jQuery 自动补全插件(jQuery UI Autocomplete)是实现这一功能的强大工具,它基于...
jQuery百度搜索自动补全插件基于流行的JavaScript库jQuery和typeahead.js实现,为网页上的搜索框提供了高效且用户友好的自动补全功能。这个插件主要用于提升用户体验,尤其是在需要处理大量数据并希望用户能快速找到...
jQuery自动补全是一种常见的前端开发技术,用于提升用户体验,特别是在搜索框或输入字段中,它能够根据用户输入的内容实时提供预测建议。这个功能在许多网站和应用中都有所应用,如百度搜索、谷歌搜索等。它能够帮助...
**二、jQuery自动补全插件** 1. **jQuery UI Autocomplete**: 它是jQuery UI库的一部分,提供丰富的自定义选项,如最小输入长度、匹配模式、结果排序等。它支持JSON、XML等多种数据格式,并可以与其他UI组件无缝...
本项目"jQuery自动补全筛选input代码"是利用jQuery实现的一个功能,它允许用户在input输入框中输入关键词时,自动筛选并显示匹配的信息。这种功能在网页搜索、表单填充等场景下非常实用,提高了用户体验。 首先,...
**jQuery 实现仿搜索引擎文本框自动补全插件** 在 Web 开发中,为了提高用户体验,经常会在输入框中使用自动补全(Autocomplete)功能,就像我们在使用搜索引擎时,输入关键词后会看到下拉的建议列表。jQuery 是一...
jQuery的`autocomplete`插件是实现自动补全功能的核心组件,它通过监听用户在输入框中的输入事件,向服务器发送异步请求,获取匹配的数据,并在输入框下方显示建议列表。 在Asp.net和jQuery的集成应用中,实现自动...
1. 使用jQuery UI Autocomplete插件:这是jQuery官方提供的一个强大且高度可定制的自动补全插件。只需引入jQuery UI库及相关CSS、JS文件,然后通过简单的配置即可实现自动补全功能。例如: ```html ``` ```...
这个“自动补全插件.rar”文件包含了实现这一功能的jQuery插件及其演示示例。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在自动补全插件中,jQuery的强大功能被...
标题“改进版 jquery 仿百度谷歌自动补全输入(支持中文)”涉及到的是一个基于jQuery的前端开发技术,旨在实现类似百度和谷歌搜索框的自动补全功能,而且这一版本特别优化了对中文字符的支持。在网页交互设计中,...