栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > asp

asp.net和ajax实现智能搜索功能代码

asp 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

asp.net和ajax实现智能搜索功能代码

第一步,先做好搜索页面
复制代码 代码如下:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>



无标题页


#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;
}








第二步,添加返回搜索结果的页面,该页面由于不用在客户端显示,所以就不用做界面。
复制代码 代码如下:
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("1111")
searchResult.Append("2222")
searchResult.Append("2222")
Else
searchResult.Append("aaaa")
searchResult.Append("bbbb")
searchResult.Append("cccc")
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}
}

最后实现的效果如下:
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/58873.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号