jquery+ajax+text文本框实现智能提示完整实例

前端之家收集整理的这篇文章主要介绍了jquery+ajax+text文本框实现智能提示完整实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jquery+ajax+text文本框实现智能提示方法分享给大家供大家参考,具体如下:

模仿百度查询的智能提示

先看看效果图:

代码部分:

CSS代码:

HTML代码(本文采用的asp.net页面编写的):

智能模糊查询提示

jquery代码部分:

0) { var layer = ""; layer = ""; $.each(objData,function (idx,item) { layer += "
" + item.userName + "添加到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"); //同上 }

.cs后台代码:

0) { returnStr.Append(ToJson(dt)); return returnStr.ToString(); } else { return ""; } } #endregion #region dataTable转换成Json格式 /// /// dataTable转换成Json格式 /// /// /// 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程序设计有所帮助。

原文链接:https://www.f2er.com/ajax/47372.html

猜你在找的Ajax相关文章