/*
* jQuery AutoComplete
*
* Author: cntlis
* http://blog.csdn.net/cntlis
*
* Licensed like jQuery, see http://docs.jquery.com/License
*
* 作者:cntlis
* QQ:8112857
*/
$.fn.AutoComplete = function(url,option){
var me= this;
var strKey= $(me).val();
var strKeyBak= "";
var isShow = false;
var doption={
iwidth: '0px', //下拉框的宽度
iLengthLower: 1, //当表单的长度大于iLengthLower小于iLengthUpper时才开始执行搜索
iLengthUpper: 50,
strPara: "Keyword", //变量名称
zIndex: 1, //提示框的Z-INDEX值
hasscroll: 0, //是否出现滚动条0无1有
hasclose: 1, //是否拥有关闭窗口
desfun:function(){}
};
$.extend(doption,option);
var iLengthLower= doption.iLengthLower;
var iLengthUpper= doption.iLengthUpper;
var strPara= doption.strPara;
if ($("#autocomplete").length<1){$("body").append("<div id='autocomplete' class='autocompletefloor'></div>");}
$("#autocomplete").hide();
$(me).keyup(function(e){keysearch(e.keyCode);});
$(me).keydown(function(e){LineSelect(e.keyCode);});
$(me).bind("blur",function(){
strKeyBak= $("#autocomplete ul .selected .keyname").text(); //为click事件增加处理
if (strKeyBak.length>0 && strKeyBak!=$(me).val()){
$(me).val(strKeyBak);
doption.desfun();
};
floorHide();
});
var encode=function(v){//如果包含中文就escape,避免重复escape)
return escape(v).replace(/\+/g, '%2B').replace(/\"/g,'%22').replace(/\'/g, '%27').replace(/\//g,'%2F');
}
function floorHide(){
$("#autocomplete").hide().html("");
strKey= "";
isShow = false;
}
function floorShow(){
var p= $(me).offset();
var w= (doption.iwidth == "0px") ? $(me).width()+2 : doption.iwidth;
$("#autocomplete").css({
'z-index:':doption.zIndex,
width:w,
top:parseInt(p.top+$(me).outerHeight())+"px",
left:parseInt(p.left)+"px"
}).show();
strKey= "";
isShow = true;
}
function keysearch(code){
var strKeyNow=$(me).val();
if(code == 38 || code == 40 || code == 13 || code == 27 || code == 9) return; //TAB/回车、ESC、向上、向下
if((strKey == "" || strKeyNow != strKey) && strKeyNow.length >= iLengthLower && strKeyNow.length <= iLengthUpper){
$.ajax({
type: "Get",
dataType: "json",
url: url,
data: strPara != "" ? strPara + "=" + encode(strKeyNow) : "",
success: function(json){
json=json.keylist;
if (json.length>0){
//获取搜索数据
var strContent= "<ul>";
$.each(json, function(i, n){
if(n.keyname.length>0){ //如果
//alert(n.keyname);
strContent+= '<li class="keyinfo"><span class="keyname">'+n.keyname+'</span>';
try{
if (n.keyextend.length>0){strContent+='<span class="keyextend">'+n.keyextend+'</span>';}
}catch(E){};
strContent+= '</li>';
};
});
if (doption.hasclose==1){
strContent+= '<li class="close"><span>关闭</span></li>';
}
strContent+='</ul>';
$("#autocomplete").html(strContent);
$("#autocomplete .keyinfo").mouseover(function(){$("#autocomplete .selected").removeClass("selected");$(this).removeClass("unselected").addClass("selected");}).mouseout(function(){$(this).removeClass("selected").addClass("unselected");}).click(function(){if(strKeyBak.length()>0){$(me).val(strKeyBak);}});
floorShow();
}else{
//没有搜索数据
floorHide();
return;
}
}
});
strKey=$(me).val();
}
if(strKey.length == 0 || strKey.length <= iLengthLower || strKey.length >= iLengthUpper) floorHide();
}
function LineSelect(code){
if(code == 27){floorHide();};//回车键、ESC键
if(code == 13){floorHide();doption.desfun();};
if(!isShow) return;
ObjSelected=$("#autocomplete ul .selected");
if (ObjSelected.length>0){ //如果已经有选定
//alert('dasfdas');
if(code == 38){ //向上键
if(ObjSelected.prev().text() != ""){ //如果不是第一个数据
ObjSelected.removeClass("selected").addClass("unselected").prev().removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}else{
ObjSelected.removeClass("selected").addClass("unselected");
$("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}
}else if (code == 40){ //向下键
if(ObjSelected.next().text() != ""){ //如果不是第一个数据
ObjSelected.removeClass("selected").addClass("unselected").next().removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}else{
ObjSelected.removeClass("selected").addClass("unselected");
$("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete ul .selected .keyname").text());
}
}
}else if(code == 38){
$("#autocomplete .keyinfo:last").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete .keyinfo:last .keyname").text());
}else if(code == 40){
$("#autocomplete .keyinfo:first").removeClass("unselected").addClass("selected");
$(me).val($("#autocomplete .keyinfo:first .keyname").text());
}
}
}
以上为complete.js
添加引用
<script src="../js/jquery-latest.js" type="text/javascript"></script>
<script src="../js/complete.js" type="text/javascript"></script>
添加样式
*
{
margin: 0px;
padding: 0px;
}
#autocomplete
{
border: 1px solid #000;
position: absolute;
background-color: #fff;
}
/*每行的格式*/#autocomplete li
{
display: block;
text-align: left;
height: 20px;
line-height: 20px;
background-color: #fff;
cursor: default;
padding: 0 5px;
clear: both;
}
/*鼠标选中时的格式*/#autocomplete .selected
{
background-color: #565da9;
color: #fff;
overflow: hidden;
}
/*鼠标离开时代格式*/#autocomplete .unselected
{
background-color: #fff;
color: #666;
}
/*关键字信息*/#autocomplete .keyname
{
display: block;
float: left;
}
/*关键字扩展信息*/#autocomplete .keyextend
{
display: block;
float: right;
color: green;
}
#autocomplete .unselected .keyextend
{
color: green;
}
#autocomplete .selected .keyextend
{
color: #fff;
}
/*关闭*/#autocomplete .close
{
text-align: right;
}
#autocomplete .close span
{
color: blue;
cursor: pointer;
text-decoration: underline;
}
使用
$("#<%=txtsupplierId.ClientID %>").AutoComplete("AddApplication.ashx?key=" + $("#<%=txtsupplierId.ClientID %>").val() + "&action=supplier", "");
后台代码
private void AutoAddSuplier(string keyWords)
{
Response.Write("{'keylist':[");
for (int i = 0; i < 10; i++)
{
Response.Write("{'keyname':'" + keyWords + i + "','keyextend':''},");
}
Response.Write("{'keyname':'" + keyWords + "10'}]}");
}
分享到:
相关推荐
jquery 仿搜索自动完成功能
网上有不少实现自动完成的asp.net控件,也有不少基于jquery实现的插件。现在我采用jquery插件,在asp.net2.0环境下实现了重写Textbox控件来实现自动完成功能。
使用jQuery+CSS 做了一个输入框自动完成的功能,代码不多,有例子,简单易懂。有HTML和JSP两个格式的。使用到了JSON数据格式。
jquery autocomplete.js 是一款优秀的开源JS,支持自动完成,不过如果是中文失效。原因是由于中文编码不一致引起的,修改源文件中AJAX请求中的编码,加上escape编码后,在后台用Server.URLDecode解码后,则中文也...
jQuery时间自动完成插件
tagator标签输入控件(jQuery),输入文字后按回车键完成输入,支持自动补全,兼容主流浏览器
jQuery的Ajax的自动完成功能允许您轻松地创建自动完成/自动提示框的文本输入字段。它始建集中表现为每一个查询缓存被从本地缓存中相同的重复的查询结果。如果没有特定查询的结果,它停止发送请求到服务器的其他查询...
在bootstrap的对话框中,当其中的输入项使用了自动完成控件,则其中下拉框中的内容就会被bootstrap对话框的覆盖层遮盖。 为了能够使后面的自动完成的层显示出来,可以使用如下的样式定义: ul.ui-autocomplete{ z-...
juuery的ui空间,里面包含日期选择,下拉自动显示,自动完成功能,自动展开功能等
3.3.2 JQuery UI Autocomplete(自动完成) 56 3.3.3 JQuery UI Button(按钮) 63 3.3.4 JQuery UI Datepicker (时间控件) 69 3.3.5 JQuery UI Dialog (对话框) 79 3.3.6 JQuery UI Menu (JQuery菜单) 88 3.3.7 ...
支持 Office 自动化,并提供大量的实例源代码。支持 Http/FTP 上传下载功能,轻松实现在线 Word 功能。该控件可以集成到 VC,VB,C#,ASP,Delphi 等程序中,支持从 Office 97 到 Office 2003 的各个版本。安装完成...
关于jQuery-ui-1.8中的自动完成控件,其匹配方式是使用正则表达式进行匹配的。
第5章 jQuery实现用户输入自动完成功能 5.1 最简单的用户输入自动完成 5.2 使用远程数据源的自动完成 5.3 带缓存的自动完成 5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维...
3.3.2 JQuery UI Autocomplete(自动完成) 56 3.3.3 JQuery UI Button(按钮) 63 3.3.4 JQuery UI Datepicker (时间控件) 69 3.3.5 JQuery UI Dialog (对话框) 79 3.3.6 JQuery UI Menu (JQuery菜单) 88 ...
jQuery time自动完成插件 这是什么? 这是一个时间选择器,类似于Google日历的时间选择器用于事件的工作方式。 它的意思是聪明,性感和直观。 一些使超级傻瓜妙不可言的事情: 开始时间默认为用户当前时间(在您...
3.3.2 JQuery UI Autocomplete(自动完成) 56 3.3.3 JQuery UI Button(按钮) 63 3.3.4 JQuery UI Datepicker (时间控件) 69 3.3.5 JQuery UI Dialog (对话框) 79 3.3.6 JQuery UI Menu (JQuery菜单) 88 ...
一直自制的自动提示控件。基于jquery的。可以让页面中,所有calss= 'needToRemember'的 type="text"控件拥有自动完成功能。演示文档可以在 html/test.html 中看到。