jquery+ajax+text文本框实现智能提示完整实例.docx
《jquery+ajax+text文本框实现智能提示完整实例.docx》由会员分享，可在线阅读，更多相关《jquery+ajax+text文本框实现智能提示完整实例.docx（6页珍藏版）》请在冰豆网上搜索。
jquery+ajax+text文本框实现智能提示完整实例
jquery+ajax+text文本框实现智能提示完整实例_
本文实例讲解并描述了jquery+ajax+text文本框实现智能提示的方法。
分享给大家供大家参考，具体如下：
仿照XX查询的智能提示
先看看效果图：
代码部分:
CSS代码:
styletype="text/css"
#searchresult
{
width:
130px;
position:
absolute;
z-index:
1;
overflow:
hidden;
left:
130px;
top:
71px;
background:
#E0E0E0;
border-top:
none;
}
.line
{
font-size:
12px;
background:
#E0E0E0;
width:
130px;
padding:
2px;
}
.hover
{
background:
#007ab8;
width:
130px;
color:
#fff;
}
.std
{
width:
150px;
}
/style
html代码（本文采纳的页面编写的）:
body
formid="form1"runat="server"
div
智能模糊查询提示
inputid="txt_search"type="text"style="width:
150px;"/
divid="searchresult"style="display:
none;"
/div
/div
/form
/body
jquery代码部分：
scripttype="text/javascript"
$（function（）{
$（"#txt_search"）.keyup（function（evt）{
ChangeCoords（）;//掌握查询结果div坐标
vark=window.event?
evt.keyCode:
evt.which;
//输入框的id为txt_search，这里监听输入框的keyup大事
//不为空不为上箭头或下箭头或回车
if（$（"#txt_search"）.val（）!
=""k!
=38k!
=40k!
=13）{
$.ajax（{
type:
'Post',
//async:
false,//同步执行，不然会有问题
dataType:
"json",
url:
"IntelligenceSelect.aspx/GetUserNameList",//提交的页面/方法名
data:
"{'userName':
'"+$（"#txt_search"）.val（）+"'}",//参数（假如没有参数：
null）
contentType:
"application/json;charset=utf-8",
error:
function（msg）{//恳求失败处理函数
alert（"数据加载失败"）;
},
success:
function（data）{//恳求胜利后处理函数。
varobjData=eval（"（"+data.d+"）"）;
if（objData.length0）{
varlayer="";
layer="tableid='aa'";
$.each（objData,function（idx,item）{
layer+="trclass='line'tdclass='std'"+item.userName+"/td/tr";
}）;
layer+="/table";
//将结果添加到div中
$（"#searchresult"）.empty（）;
$（"#searchresult"）.append（layer）;
$（".line:
first"）.addClass（"hover"）;
$（"#searchresult"）.css（"display",""）;
//鼠标移动大事
$（".line"）.hover（function（）{
$（".line"）.removeClass（"hover"）;
$（this）.addClass（"hover"）;
},function（）{
$（this）.removeClass（"hover"）;
//$（"#searchresult"）.css（"display","none"）;
}）;
//鼠标点击大事
$（".line"）.click（function（）{
$（"#txt_search"）.val（$（this）.text（））;
$（"#searchresult"）.css（"display","none"）;
}）;
}else{
$（"#searchresult"）.empty（）;
$（"#searchresult"）.css（"display","none"）;
}
}
}）;
}
elseif（k==38）{//上箭头
$（'#aatr.hover'）.prev（）.addClass（"hover"）;
$（'#aatr.hover'）.next（）.removeClass（"hover"）;
$（'#txt_search'）.val（$（'#aatr.hover'）.text（））;
}elseif（k==40）{//下箭头
$（'#aatr.hover'）.next（）.addClass（"hover"）;
$（'#aatr.hover'）.prev（）.removeClass（"hover"）;
$（'#txt_search'）.val（$（'#aatr.hover'）.text（））;
}
elseif（k==13）{//回车
$（'#txt_search'）.val（$（'#aatr.hover'）.text（））;
$（"#searchresult"）.empty（）;
$（"#searchresult"）.css（"display","none"）;
}
else{
$（"#searchresult"）.empty（）;
$（"#searchresult"）.css（"display","none"）;
}
}）;
$（"#searchresult"）.bind（"mouseleave",function（）{
$（"#searchresult"）.empty（）;
$（"#searchresult"）.css（"display","none"）;
}）;
}）;
//设置查询结果div坐标
functionChangeCoords（）{
//varleft=$（"#txt_search"）[0].offsetLeft;//猎取距离最左端的距离，像素，整型
//vartop=$（"#txt_search"）[0].offsetTop+26;//猎取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
varleft=$（"#txt_search"）.position（）.left;//猎取距离最左端的距离，像素，整型
vartop=$（"#txt_search"）.position（）.top+20;;//猎取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
$（"#searchresult"）.css（"left",left+"px"）;//重新定义CSS属性
$（"#searchresult"）.css（"top",top+"px"）;//同上
}
/script
.cs后台代码:
#region
[WebMethod（）]
publicstaticstringGetUserNameList（stringuserName）
{
StringBuilderreturnStr=newStringBuilder（）;
stringstrsql="selectuserNamefrompub_user_infwhereuserNamelike'"+userName+"%'anduseStatus=1";
DataTabledt=pms.SqlHelper.ExecuteDataTable（strsql）;
if（dt.Rows.Count0）
{
returnStr.Append（ToJson（dt））;
returnreturnStr.ToString（）;
}
else
{
return"";
}
}
#endregion
#regiondataTable转换成Json格式
///summary
///dataTable转换成Json格式
////summary
///paramname="dt"/param
///returns/returns
publicstaticstringToJson（DataTabledt）
{
StringBuilderjsonBuilder=newStringBuilder（）;
jsonBuilder.Append（"["）;
for（inti=0;idt.Rows.Count;i++）
{
jsonBuilder.Append（"{"）;
for（intj=0;jdt.Columns.Count;j++）
{
jsonBuilder.Append（"\""）;
jsonBuilder.Append（dt.Columns[j].ColumnName）;
jsonBuilder.Append（"\":
\""）;
jsonBuilder.Append（dt.Rows[i][j].ToString（））;
jsonBuilder.Append（"\","）;
}
jsonBuilder.Remove（jsonBuilder.Length-1,1）;
jsonBuilder.Append（"},"）;
}
jsonBuilder.Remove（jsonBuilder.Length-1,1）;
jsonBuilder.Append（"]"）;
returnjsonBuilder.ToString（）;
}
#endregion
盼望本文所述对大家jQuery程序设计有所关心。
...
升级会员 