/*
* 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 自动完成控件详解*...总的来说,jQuery自动完成控件通过其强大的功能和简洁的API,为Web开发者提供了高效构建搜索框和表单字段自动完成功能的途径。合理利用这个工具,可以显著提升网页的交互性和用户满意度。
这个标题提到的是利用jQuery插件在ASP.NET 2.0环境中实现一个自动完成控件,以重写TextBox控件的方式。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互,非常适合用来...
5. **Autocomplete**:此控件提供自动完成功能,常用于搜索输入框,能根据用户输入的字符实时匹配并显示建议列表。 6. **Accordion 和 Tabs**:Accordion 用于折叠/展开内容区域,而 Tabs 则将多个页面内容组织成...
本示例中,我们将探讨如何使用jQuery、JavaScript、HTML和JSP来实现这一功能,同时结合JSON数据格式,创建一个高效且易于理解的自动完成控件。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理...
例如,你可以将日历控件与表单结合,当用户选择日期后自动提交表单,或者将日历控件放入一个模态对话框中,提供更好的用户体验。 最后,对于压缩包中的“jquery_ui日历控件”文件,这可能包含了示例代码、样式文件...
【纯JQUERY自查询(完成)控件】是一款轻量级的前端插件,主要用于实现自动补全功能,它基于JavaScript库JQuery构建,适用于网页中的输入框元素,以提高用户体验,快速找到并选择所需内容。这个控件设计精巧,占用...
### jQuery 获取控件的坐标位置 #### 知识点概览 在网页开发过程中,经常需要获取页面元素的坐标位置,以便实现特定的功能,如弹窗定位、元素拖拽等。jQuery 提供了一系列方法来方便地获取这些坐标值。本文将详细...
ASP.NET Web TextBox 自动完成控件是Web开发中一种实用的UI组件,它极大地提高了用户在网页上输入数据时的效率和便捷性。这个控件允许用户在输入文本时,根据已有的数据集(如数据库中的条目)提供即时建议,从而...
jquery autocomplete.js 是一款优秀的开源JS,支持自动完成,不过如果是中文失效。原因是由于中文编码不一致引起的,修改源文件中AJAX请求中的编码,加上escape编码后,在后台用Server.URLDecode解码后,则中文也...
// 在页面加载完成后初始化控件 initYearMonthPicker(); }); ``` 这里,我们使用了Bootstrap Datepicker插件,它扩展了jQuery的功能,提供了丰富的日期选择功能。如果你的项目中没有使用Bootstrap,也可以寻找...
jQuery时间自动完成插件是一种基于JavaScript库jQuery设计的交互式组件,主要用于提升用户在输入时间相关的数据时的体验。在Web应用中,特别是在预订、调度或时间管理等场景下,这种插件尤其有用,因为它可以帮助...
Java编写自动完成控件是一种常见的前端交互功能,用于提高用户输入效率,常见于搜索框、表单填写等场景。在Java环境下,实现这样的功能通常涉及到客户端JavaScript与服务器端Java的协同工作。本控件利用JavaScript的...
总的来说,VS2008和VS2005中的自动完成控件主要依赖客户端技术,如jQuery和相关插件,以提供Web应用的交互性和用户体验。开发者可以根据项目需求选择适合的解决方案,无论是使用内置的ASP.NET AJAX控件,还是第三方...
在IT行业中,自动完成控件是一种常见的用户界面组件,它极大地提高了用户输入的效率和准确性。这个"自动完成控件ajax修改版源码"是一个基于AJAX技术实现的改进版本,旨在提供更好的用户体验,允许用户在输入时动态...
在C#和AJAX开发中,自动完成控件是一种常见的用户界面组件,它极大地提高了用户的输入效率和体验。这种控件通常用于搜索框,当用户输入文本时,它会实时地提供与输入相匹配的建议列表。在这个场景下,"c#ajax 自动...
**基于jQuery的分页控件**是Web开发中常见的组件,尤其在数据量较大需要进行分页展示的场景下,如新闻列表、产品目录等。这个控件是**客户端控件**,意味着它主要在用户的浏览器端运行,通过**AJAX**技术与服务器...
这里的`$(function() {...})`是jQuery的文档就绪(document ready)函数,确保DOM加载完成后执行。 ### 4. 配置选项 jQuery UI的datepicker提供了丰富的配置选项,例如: - `dateFormat`:设置日期格式,如`'yy-...
**jQuery Dialog 控件详解** jQuery Dialog 是 jQuery UI 库中的一个核心组件,它提供了一种在网页上创建可自定义的对话框(弹窗)的方法。这个控件用于展示信息、提示用户输入或者进行交互操作,是网页界面设计中...
6. **Autocomplete**:自动完成功能可以根据用户输入提供建议,适用于搜索框或输入字段,提高用户输入效率。 7. **Accordion** 和 **Tabs**:这两种组件用于内容的折叠和分页展示,可以帮助组织大量信息,提高页面...