asp.net和ajax实现智能搜索功能代码
<%@ 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}
}
最后实现的效果如下： 
相关推荐
-
Asp.net中使用DapperExtensions和反射来实现一个通用搜索
前言 搜索功能是一个很常用的功能,当然这个搜索不是指全文检索,是指网站的后台管理系统或ERP系统列表的搜索功能.常见做法一般就是在搜索栏上加上几个常用字段来搜索.代码可能一般这样实现 StringBuilder sqlStr = new StringBuilder(); if (!string.IsNullOrEmpty(RealName)) { sqlStr.Append(" and RealName = @RealName"); } if (Age != -1) { sqlStr.
-
c#反射表达式树模糊搜索示例
复制代码 代码如下: public static Expression<Func<T, bool>> GetSearchExpression<T>(string SearchString) { Expression<Func<T, bool>> filter = null; if (string.IsNullOrEmpty(SearchString)) return null; var l
-
ASP.NET 调用百度搜索引擎的代码
百度搜索引擎提供了一段嵌入到页面中的代码 <form action="http://www.baidu.com/baidu" target="_blank"> <table><tr><td> <input name=tn type=hidden value=baidu> <input type=text name=word size=80> <input type=hidden name=
-
asp.net+js实现的ajax sugguest搜索提示效果
效果图: 功能: 1.可以有方向键上下控制. 2.支持关键字高亮.(在该此次代码中省略) 3.对选中可按回车提交. 使用:重点关注id=tbxsearch和id=search_suggest这两个东东.html部分涉及到定位的问题,自己处理好,有问题可以提问,细节自己把握. 注明:在接收的那个文件,其实应该接收一个参数skey的,我先写死了.记得接收的时候先解码一次. 申明:阿会楠根据网上一份原作者不详的代码进行了修改,以适合自己的项目并增加了多个功能.此次放出的代码为基本实现代码,也是最接近原
-
asp.net(c#)捕捉搜索引擎蜘蛛和机器人
下面是访问日志文件2008-8-13 14:43:22 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 1.1.4322) 2008-8-13 14:43:27 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 1.1.4322) 2008-8-13 14:44:18 Mozi
-
asp.net和ajax实现智能搜索功能代码
第一步,先做好搜索页面 复制代码 代码如下: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
-
Servlet+Ajax实现智能搜索框智能提示功能
利用无刷新技术智能变换搜索框的提示,同百度搜索 效果图 其基本原理: 1.给搜索框编写js绑定事件onkeyup(键盘输入时).onfocus(当鼠标点击搜索框外的时候清空提示) 2.首先获得用户输入.之后将获得的数据传给服务器,服务器将数据传给后台,后台获取服务器传来的数据进行处理,得到关联数据,向前端返回json格式,前端通过回调函数,将返回来的json解析成文本,将文本传输到搜索框下方的展示窗 如下为支持json的jar包 search.jsp <%@ page language="
-
Java实现搜索功能代码详解
首先,我们要清楚搜索框中根据关键字进行条件搜索发送的是Get请求,并且是向当前页面发送Get请求 //示例代码 请求路径为当前页面路径 "/product" <!-- 搜索框 get请求 根据商品名称的关键字进行搜索--> <form action="/product" class="form-inline pull-left" > <input type="text" name="pr
-
ASP实现智能搜索实现代码
<% Function AutoKey(strKey) Const lngSubKey=2 lngLenKey=Len(strKey) Select Case lngLenKey Case 0 '若为空串,转到出错页 Response.Redirect "Error.htm" Case 1 '若长度为1,则不设任何值 strNew1="" strNew2="" Case Else '若长度大于1,则从字符串首字符开始,循环取长
-
自定义搜索功能Android实现
先看看效果图: 源码下载:自定义搜索功能 代码: SearchActivity.java package com.bzu.gxs.search.activity; import android.app.Activity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.View; import android.widget.AdapterView; import and
-
ASP.NET搭配Ajax实现搜索提示功能
平时的软件开发中,信息的搜索是经常碰到的,增加搜索关键字提示是提高用户体验的一种很好的办法.今天就介绍下在ASP.NET如何利用AJAX来实现搜索的信息提示! 1.需要了解的一些知识点 (1)AJAX对象不同浏览器的创建 不同的浏览器对AJAX(XMLHttpRequest)对象的实现是不一样的,例如IE浏览器是通过ActiveX控件来实现AJAX对象.而其他一些浏览器比如火狐,它将AJAX对象实现成了一个浏览器内部的对象叫XMLHttpRequest,所以不同的浏览器创建AJAX对象的方式也就
-
ASP智能搜索的实现
用ASP实现搜索引擎的功能是一件很方便的事,可是,如何实现类似3721的智能搜 索呢?比如,当在搜索条件框内输入"中国人民"时,自动从中提取"中国". "人民"等关键字并在数据库内进行搜索.看完本文后,你就可以发现,这个功 能实现起来竟然是如此的简单.OK,Follow Me! 第一步,我们要建立一个名为db_sample.mdb的数据库(本文以Access2000数 据库为例),并在其中建立表T_Sample.表T_Sample包括如下
-
ASP.NET使用ajax实现分页局部刷新页面功能
listview列表实现分页是非常容易的.ListView分页是非常简单的,加上一个DataPager控件,把ListView的ID赋予就可以了.最开始我就是这么写的.(网上有人说这样是伪分页?) <asp:ListView ID="newBlogItems" runat="server" DataSourceID="AccessDataSource1" ViewStateMode="Disabled"> <
-
ThinkPHP实现ajax仿官网搜索功能实例
本文实例讲述了ThinkPHP实现ajax仿官网搜索功能的方法.分享给大家供大家参考. 具体实现方法如下: 后台代码: 复制代码 代码如下: //搜索,如果在1不在0 function search(){ $keyword = $_POST['search']; $Goods=M('goods'); //这里我做的一个模糊查询到名字或者对应的id,主要目的因为我这个系统是 //商城系统里面用到直接看产品ID $map['goods_id|goods_n
-
asp+ajax仿google搜索提示效果代码
对于更完整的代码可以参考,这个是支持数据库的版本.经过我们编辑测试.Asp+Ajax仿google搜索提示效果 数据库版需要修改的地方有 复制代码 代码如下: javascript.js var url="ajax.asp"; //后台地址 var time_delayajax=300; //搜索延迟 var time_delayupdown=100; //方向键延迟 obj_div.style.top = (xtop + 20) + "px"; //20差不多是输