近来一直在开发股票模拟系统，终于告一段落了，回想起来感慨很多。突然想应该做点总结了，想来想去还是觉得通过写点日志来把相关的知识点记录下来，下面就我在项目中经常用到的动态提示搜索选项功能的实现。
第一步，先做好搜索页面
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language=javascript src=JScript.js type="text/javascript" ></script>
<style>
#result{
position:absolute;
width:150px;
height:auto;
margin:0px;
z-index:1;
font-size:14px;
border: 1px dashed #ccccc4;
display:none;
}
#result .firstHang{
background-color:#DDDDDD;
height:15px;
padding-top:5px;
}
#result b{
width:61px;
float:left;
}
#result nobr{
width:61px;
float:left;
}
#result .otherHang{
background-color:#FFFFFF;
height:15px;
padding-top:5px;
}
#content{
margin-left:0px;
padding-left:0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align=center style="padding-top:100px">
<input id="searchTxt" onkeyUp="startRequest(this.value)" /> <!-- 输入框 -->
</div>
<div id="result" align="center"> <!-- 下拉搜索框 -->
<div class="firstHang">
<b>搜索</b><b>标题</b>
</div>
<div id="stockListDiv"></div>
</div>
</form>
</body>
</html>
<script language="javascript">
var obj=document.getElementById("result");
var rela=document.getElementById("searchTxt");
SetDivLocation(obj,rela);
function SetDivLocation(obj,rela) //设置下拉搜索框与输入框的相对位置
{
var x,y;
var oRect=rela.getBoundingClientRect(); //获得输入框的位置
x=oRect.left;
y=oRect.top;
obj.style.left=x+"px"; //这里要加上px,否则在fiexfox就会失效
obj.style.top=y+rela.offsetHeight+"px";
}
</script>
第二步，添加返回搜索结果的页面，该页面由于不用在客户端显示，所以就不用做界面。
Imports System.Text
Partial Class Search
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim searchContent As String = Request("content").ToString '获取搜索内容
Dim searchResult As New StringBuilder
If IsNumeric(searchContent) Then '判断是否为数字,输入不同的内容
searchResult.Append("<div class='otherHang'><nobr>11</nobr><nobr>11</nobr></div>")
searchResult.Append("<div class='otherHang'><nobr>22</nobr><nobr>22</nobr></div>")
searchResult.Append("<div class='otherHang'><nobr>22</nobr><nobr>22</nobr></div>")
Else
searchResult.Append("<div class='otherHang'><nobr>aa</nobr><nobr>aa</nobr></div>")
searchResult.Append("<div class='otherHang'><nobr>bb</nobr><nobr>bb</nobr></div>")
searchResult.Append("<div class='otherHang'><nobr>cc</nobr><nobr>cc</nobr></div>")
End If
Response.Write(searchResult.ToString) '向客户端发送结果
Response.End() '关闭客户端输出流
End Sub
End Class
第三步就是最关键的一步了
// JScript 文件
var xmlHttp;
function cratexmlHttpRequest()
{
//判断是否为IE浏览器
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new window.XMLHttpRequest();
}
}
//启动对页面的请求
function startRequest(content)
{
cratexmlHttpRequest();
//设置请求状态变化调用的方法
xmlHttp.onreadystatechange=handleState;
//建立对服务器的调用
var url="Search.aspx?content="+escape(content); '发送页面url
xmlHttp.open("get",url,true);
xmlHttp.send(null);
}
function handleState()
{
try{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var data=xmlHttp.responseText; '得到搜索结果
var result=document.getElementById("result");
var stockListDiv=document.getElementById("stockListDiv");
if(data=="") '如果搜索结果为空，不显示下拉框
{
result.style.display="none";
stockListDiv.innerHTML="";
}
else
{
stockListDiv.innerHTML=data; '显示下拉框
result.style.display="block";
}
}
}
}
catch(error)
{error.message}
}
最后实现的效果如下：
分享到：
相关推荐
一个基于ajax+ASP.NET技术实现的智能化模糊搜索文本框控件，采用C#+VS2005开发。
Asp.Net+Ajax控键实现搜索输入框智能提示功能源码
asp.net 通过ajax仿百度智能搜索，实现快速搜索 asp.net 通过ajax仿百度智能搜索，实现快速搜索
基于ASP.NET Ajax框架实现表单验证编程原理
Asp.net结合ajax实现文本框智能提示功能2.0和3.0两种方法，保证能用。运行速度也很快
ASP.net+AJAX智能匹配检索（自动完成）
用ajax+js技术实现asp.net中textbox的智能提示，外加漂亮的CSS样式。
1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP.NET AJAX Web应用程序AjaxStart 1.4 配置ASP.NET AJAXWeb应用程序 ...
1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP.NET AJAX Web应用程序AjaxStart 1.4 配置ASP.NET AJAXWeb应用程序 ...
1.1.1 ASP.NET和ASP.AJAX 1.1.2 ASP.AJAX服务器端架构 1.1.3 ASP.AJAX客户端架构 1.2 搭建ASP.NET AJAX开发环境 1.3 第一个ASP.NET AJAX Web应用程序AjaxStart 1.4 配置ASP.NET AJAXWeb应用程序 ...
创建ASP.NET MVC工程、创建数据库、ViewData的使用方法和ViewModel类的构造 、Master.Page和Partials构建UI 、高效率的换页（Paging）构造方法 、应用程序的漏洞防御 、使用AJAX动态更新方法
本技术的核心是通过ASP.NET Ajax Control Toolkit中的AutoCompleteExtender控件实现。 AutoCompleteExtender控件实现自动输入建议的功能，通过调用WebService或本页面对应的方法名来获取提示数据，供用户达到自动...
近来一直在开发股票模拟系统，终于告一段落了，回想起来感慨很多。突然想应该做点总结了，想来想去还是觉得通过写点日志来把相关的知识点记录下来，下面就我在项目中经常用到的动态提示搜索选项功能的实现。
本实例的核心技术是通过ASP.NET AJAX Control Toolkit中的AutoCompleteExtender控件实现。 AutoCompleteExtender控件实现自动输入建议的功能，通过调用WebService或本页面对应的方法名来获取提示数据，供用户能达到...
基于Asp.net MVC和Ajax实现的智能输入JS库：利用JQuery实现的浏览器端智能输入，能与最新的ASP.Net MVC很好地集成，小巧，方便实用。开发者可以通过修改代码中的CSS来配置自己独特的风格。 JS库：Intelligence.js ...
asp.net 仿百度搜索栏智能感知实现快速搜索
利用反射实现ASP.NET控件和数据实体之间的双向绑定,并且在客户端自动验证输入的内容是否合法 asp.net报表解决方法 SQLDMO类的使用 SQL过程自动C#封装,支持从表到基本存储过程生成 使用SQLDMO控制 SQL Server 使用SQL...
ASP.NET AJAX的智能感知和调试实例是一个好资料，要么下载看一看
自己在vs2005环境下做的智能匹配的例子，一共有两个数据库，SQL SERVER 和XML数据库,有兴趣的可以看一下啊！
1.1 ASP.NET和.NET Framework 5 1.1.1 框架类库 5 1.1.2 公共语言运行库 9 1.2 ASP.NET控件 10 1.2.1 ASP.NET控件概览 11 1.2.2 HTML控件 12 1.2.3 理解和处理控件事件 12 1.2.4 视图状态 17 1.3 ASP.NET页面 20 ...