侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

基于ajax的简单搜索实现方法

前端  /  管理员 发布于 5年前   353

本文实例讲述了基于ajax的简单搜索实现方法。分享给大家供大家参考,具体如下:

这里使用两个.aspx文件,一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来输入搜索数据,后一个用来对搜索关键字进行处理。js文件夹下面还有一个testJs.js的文件,它就是ajax操作的核心部分。不错,code is cheap。看代码:

testJs.js

// 此函数等价于document.getElementById /document.allfunction $(s) { if (document.getElementById) { return eval('document.getElementById("' + s + '")'); } else { return eval('document.all.' + s); } }// 创建 XMLHttpRequest对象,以发送ajax请求 function createXMLHTTP() { var xmlHttp = false; var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",       "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",       "Microsoft.XMLHTTP"]; for (var i = 0; i < arrSignatures.length; i++) {  try {   xmlHttp = new ActiveXObject(arrSignatures[i]);   return xmlHttp;  }  catch (oError) {   xmlHttp = false; //ignore  } } // throw new Error("MSXML is not installed on your system.");  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {  xmlHttp = new XMLHttpRequest(); } return xmlHttp;}function addAjaxSearch() { inputField = $("txtSearch"); completeTable = $("suggestTb"); completeDiv = $("popup"); completeBody = $("suggestBody"); var tempStr = inputField.value; // alert(tempStr); var keyWord = encodeURI(tempStr); if (tempStr == "")  return; var xmlReq = createXMLHTTP(); xmlReq.open("post", "AjaxOperations.aspx?searchKeyword=" + keyWord, true); xmlReq.onreadystatechange = function() {  if (xmlReq.readyState == 4) {   if (xmlReq.status == 200) {    //xmlReq.responseText为输出的那段字符串    setNames(xmlReq.responseText);   }   else {    alert("Connect the server failed!");   }  } } xmlReq.send(null);}// 设置div中的表格数据function setNames(names) { if (names == "") {  clearNames();  return; } clearNames(); // 清空div中已有的的表格数据 setOffsets(); // 设置div到合适的位置 var row, cell, txtNode; var s = names.split("#"); for (var i = 0; i < s.length; i++) { // 显示类似search下拉选择项  var nextNode = s[i];  row = document.createElement("tr");  cell = document.createElement("td");  cell.onmouseout = function() { this.style.backgroundColor = ''; };  cell.onmouseover = function() { this.style.backgroundColor = '#E8F2FE'; };  cell.onclick = function() { completeField(this); }; // 搜索框设置为选择的数据  cell.pop = "T";  txtNode = document.createTextNode(nextNode);  cell.appendChild(txtNode);  row.appendChild(cell);  $("suggestBody").appendChild(row); }}// 清空div中已有的的表格数据function clearNames() { completeBody = $("suggestBody"); var ind = completeBody.childNodes.length; for (var i = ind - 1; i >= 0; i--) {  completeBody.removeChild(completeBody.childNodes[i]); } completeDiv = $("popup"); completeDiv.style.border = "none";}// 设置div到合适的位置function setOffsets() { completeTable.style.width = inputField.offsetWidth; +"px"; var left = calculateOffset(inputField, "offsetLeft"); var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight; completeDiv.style.border = "black 1px solid"; completeDiv.style.left = left + "px"; completeDiv.style.top = top + "px";}function calculateOffset(field, attr) { var offset = 0; while (field) {  offset += field[attr];  field = field.offsetParent; } return offset;}// 搜索框设置为选择的数据function completeField(cell) { inputField.value = cell.firstChild.nodeValue; // 搜索框设置为选择的数据 clearNames(); //清空div中已有的的表格数据}//用来设置当鼠标失去焦点后文本框的隐藏document.onmousedown = function() { if (!event.srcElement.pop)  clearNames();} //填写输入框

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebTest2008.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 id="Head1" runat="server"> <title>Ajax Search</title> <script src="//article/js/testJs.js" type="text/javascript"></script> <style type="text/css" media="screen">  body  {   font: 11px arial;  }  .suggest_link  {   background-color: #FFFFFF;   padding: 2px 0px 2px 0px;   border:solid 1px #cceeff;  }  .suggest_link_over  {   background-color: #E8F2FE;   padding: 2px 0px 2px 0px;  }  #search_suggest  {   position: absolute;   background-color: #FFFFFF;   text-align: left;   border: 1px solid #000000;  } </style></head><body> <input name="txtSearch" id="txtSearch" type="text" class="suggest_link" onkeyup="addAjaxSearch();" maxlength="200" style="width: 200px" />  <input type="submit" id="cmdSearch" name="cmdSearch" value="Search" title="Run Search" /> <div id="popup" style="position: absolute">  <table id="suggestTb" cellspacing="0" cellpadding="0" bgcolor="#fffafa" border="0">   <tbody id="suggestBody">   </tbody>  </table> </div></body></html>

Default.aspx.cs:

using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace WebTest2008{ public partial class Default : System.Web.UI.Page {  protected void Page_Load(object sender, EventArgs e)  {  } }}

AjaxOperations.aspx:

复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxOperations.aspx.cs" Inherits="WebTest2008.AjaxOperations" %>

AjaxOperations.aspx.cs:

using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace WebTest2008{ public partial class AjaxOperations : System.Web.UI.Page {  protected void Page_Load(object sender, EventArgs e)  {   if (!string.IsNullOrEmpty(Request["searchKeyword"]))   {    string tempStr = Request["searchKeyword"];    /* 测试用 实际项目中可以对数据库进行检索等等相关操作,这里简化了 */    System.Text.StringBuilder sb = new System.Text.StringBuilder();    sb.Append(tempStr + " #");    sb.Append("#");    sb.Append(tempStr += " " + tempStr);    sb.Append("#");    sb.Append(tempStr += " " + tempStr);    Response.Write(sb.ToString().TrimEnd(new char[] { '#' }));    }  } }}

上面的代码我都已经测试通过,复制粘贴运行试试看吧。

刚看到一篇文章里说,“实时搜索带来的痛苦要远大于他带来的帮助。这就是为什么Google Suggest还处于beta测试而并没有放在主页上的原因。在Start.com Live.com上搜索的时候你是不能使用返回按钮来查看上一次搜索或返回上一页的。或许还没有人来完成这项工作,但是完成这个工作应该是很困难的至少是不太明知的或者会因此带来更多的麻烦。(译注:现在已经有很多开源的框架可以实现历史记录功能)”。其实ajax实时搜索还是很有吸引力的,现在的很多网站都有这个功能。学习一下还是很有意义的。

希望本文所述对大家ajax程序设计有所帮助。


  • 上一条:
    ajax调用中ie缓存问题解决方法
    下一条:
    ajax数据传输方式实例详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客