jquery+ajax+text文本框实现智能提示完整实例
更新时间：2016年07月09日 11:50:12 作者：wdfscp
这篇文章主要介绍了jquery+ajax+text文本框实现智能提示的方法,涉及jQuery基于ajax交互实现后台数据的动态查询与文本提示信息的显示功能,需要的朋友可以参考下
本文实例讲述了jquery+ajax+text文本框实现智能提示的方法。分享给大家供大家参考，具体如下：
模仿百度查询的智能提示
先看看效果图：
代码部分:
CSS代码:
<style type="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代码(本文采用的asp.net页面编写的):
<body> <form id="form1" runat="server"> <div> 智能模糊查询提示 <input id="txt_search" type="text" style="width: 150px;" /> <div id="searchresult" style="display: none;"> </div> </div> </form> </body>
jquery代码部分：
<script type="text/javascript">
$(function () {
$("#txt_search").keyup(function (evt) {
ChangeCoords(); //控制查询结果div坐标
var k = window.event ? evt.keyCode : evt.which;
//输入框的id为txt_search，这里监听输入框的keyup事件
//不为空 && 不为上箭头或下箭头或回车
if ($("#txt_search").val() != "" && k != 38 && k != 40 && k != 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) { //请求成功后处理函数。
var objData = eval("(" + data.d + ")");
if (objData.length > 0) {
var layer = "";
layer = "<table id='aa'>";
$.each(objData, function (idx, item) {
layer += "<tr class='line'><td class='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");
}
}
});
}
else if (k == 38) {//上箭头
$('#aa tr.hover').prev().addClass("hover");
$('#aa tr.hover').next().removeClass("hover");
$('#txt_search').val($('#aa tr.hover').text());
} else if (k == 40) {//下箭头
$('#aa tr.hover').next().addClass("hover");
$('#aa tr.hover').prev().removeClass("hover");
$('#txt_search').val($('#aa tr.hover').text());
}
else if (k == 13) {//回车
$('#txt_search').val($('#aa tr.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坐标
function ChangeCoords() {
// var left = $("#txt_search")[0].offsetLeft; //获取距离最左端的距离，像素，整型
// var top = $("#txt_search")[0].offsetTop + 26; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
var left = $("#txt_search").position().left; //获取距离最左端的距离，像素，整型
var top = $("#txt_search").position().top + 20; ; //获取距离最顶端的距离，像素，整型（20为搜索输入框的高度）
$("#searchresult").css("left", left + "px"); //重新定义CSS属性
$("#searchresult").css("top", top + "px"); //同上
}
</script>
.cs后台代码:
#region
[WebMethod()]
public static string GetUserNameList(string userName)
{
StringBuilder returnStr = new StringBuilder();
string strsql = "select userName from pub_user_inf where userName like '" + userName + "%' and useStatus=1";
DataTable dt = pms.SqlHelper.ExecuteDataTable(strsql);
if (dt.Rows.Count > 0)
{
returnStr.Append(ToJson(dt));
return returnStr.ToString();
}
else
{
return "";
}
}
#endregion
#region dataTable转换成Json格式
/// <summary>
/// dataTable转换成Json格式
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public static string ToJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.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("]");
return jsonBuilder.ToString();
}
#endregion
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery库中包括很多函数,所以开发插件的时候往往就需要注意命名空间和私有作用域等方面,下面就由Shawn Khameneh老司机带你解读jQuery插件开发流程及相关注意点.2016-05-05
checkbox:click事件触发span元素内容改变的方法
下面小编就为大家带来一篇checkbox:click事件触发span元素内容改变的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
jQuery Flash/MP3/Video多媒体插件,主要是用来加载flash或mp3等网络媒体文件。2010-01-01
在做网站的开发过程中，可能需要使用弹出层，使用jquery的blockui插件可以很轻松的实现这个效果。2011-04-04
jquery中的queue和dequeue是一组很有用的方法，他们对于一系列需要按次序运行的函数特别有用。特别animate动画，ajax，以及timeout等需要一定时间的函数2014-03-03
看了上个原生js DOM版的微博发布的效果，再来看看如何用jq写。看完代码，就会发现jq的强大，用更少的代码写更多的效果2012-10-10
在进行Web开发时，并非所有的库都适合你的项目，但你仍需要收藏一些Web UI设计相关的库或框架，以在你需要的时候，加快你的开发效率。本文为你推荐10款非常优秀的基于JQuery的Web UI设计框架2014-08-08
伸缩的导航有不少优点的，可以在有限的空间里容下很多的内容，下面有个不错的示例用到JQuery，感兴趣的朋友可以参考下2013-11-11
有些时候可能需要用到脚本为一些窗体绑定事件:比如Jquery为单选框checkbox绑定单击事件,本人搜索整理一些常用技巧，需要了解的朋友可以参考下2012-12-12
这篇文章主要介绍了jQuery Ajax通用js封装的实例代码，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-06-06
最新评论