Ajax 기반의 간단한 검색 구현 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Ajax 기반의 간단한 검색 구현 방법

亚连

May 24, 2018 pm 02:23 PM

ajax 성취하다 찾다

이 글은 ajax 기반의 간단한 검색 구현 방법을 주로 소개하며, 검색 기능을 구현하기 위한 ajax 호출의 구체적인 단계와 관련 기술을 예제 형태로 분석하여 도움이 필요한 친구들이 참고할 수 있습니다. 이 기사

예제에서는 ajax 기반의 간단한 검색 구현 방법을 설명합니다. 참고용으로 모든 사람과 공유하세요.

여기에서는 두 개의 .aspx 파일이 사용됩니다. 하나는 Default.aspx이고 다른 하나는 AjaxOperations.aspx입니다. 후자는 검색 키워드를 처리하는 데 사용됩니다. js 폴더 아래에는 ajax 작업의 핵심 부분인 testJs.js 파일도 있습니다. 예, 코드는 저렴합니다. 코드를 보세요:

testJs.js

// 此函数等价于document.getElementById /document.all
function $(s) { if (document.getElementById) { return eval(&#39;document.getElementById("&#39; + s + &#39;")&#39;); } else { return eval(&#39;document.all.&#39; + 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 != &#39;undefined&#39;) {
  xmlHttp = new XMLHttpRequest();
 }
 return xmlHttp;
}
function addAjaxSearch() {
 inputField = $("txtSearch");
 completeTable = $("suggestTb");
 completep = $("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);
}
// 设置p中的表格数据
function setNames(names) {
 if (names == "") {
  clearNames();
  return;
 }
 clearNames(); // 清空p中已有的的表格数据
 setOffsets(); // 设置p到合适的位置
 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 = &#39;&#39;; };
  cell.onmouseover = function() { this.style.backgroundColor = &#39;#E8F2FE&#39;; };
  cell.onclick = function() { completeField(this); }; // 搜索框设置为选择的数据
  cell.pop = "T";
  txtNode = document.createTextNode(nextNode);
  cell.appendChild(txtNode);
  row.appendChild(cell);
  $("suggestBody").appendChild(row);
 }
}
// 清空p中已有的的表格数据
function clearNames() {
 completeBody = $("suggestBody");
 var ind = completeBody.childNodes.length;
 for (var i = ind - 1; i >= 0; i--) {
  completeBody.removeChild(completeBody.childNodes[i]);
 }
 completep = $("popup");
 completep.style.border = "none";
}
// 设置p到合适的位置
function setOffsets() {
 completeTable.style.width = inputField.offsetWidth; +"px";
 var left = calculateOffset(inputField, "offsetLeft");
 var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight;
 completep.style.border = "black 1px solid";
 completep.style.left = left + "px";
 completep.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(); //清空p中已有的的表格数据
}
//用来设置当鼠标失去焦点后文本框的隐藏
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="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" />
 <p id="popup" style="position: absolute">
  <table id="suggestTb" cellspacing="0" cellpadding="0" bgcolor="#fffafa" border="0">
   <tbody id="suggestBody">
   </tbody>
  </table>
 </p>
</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[] { &#39;#&#39; })); 
   }
  }
 }
}

로그인 후 복사

위 내용은 앞으로 모든 사람을 위해 편집한 내용입니다. .

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7338

자바 튜토리얼

1627

Cakephp 튜토리얼

1352

라라벨 튜토리얼

1265

PHP 튜토리얼

1210

Related knowledge

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? Mar 24, 2024 am 11:27 AM

Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? 소셜 미디어의 등장으로 WeChat은 사람들의 일상 생활에 없어서는 안될 커뮤니케이션 도구 중 하나가 되었습니다. 그러나 많은 사람들이 동일한 휴대폰에서 동시에 여러 WeChat 계정에 로그인하는 문제에 직면할 수 있습니다. Huawei 휴대폰 사용자의 경우 듀얼 WeChat 로그인을 달성하는 것은 어렵지 않습니다. 이 기사에서는 Huawei 휴대폰에서 듀얼 WeChat 로그인을 달성하는 방법을 소개합니다. 우선, 화웨이 휴대폰과 함께 제공되는 EMUI 시스템은 듀얼 애플리케이션 열기라는 매우 편리한 기능을 제공합니다. 앱 듀얼 오픈 기능을 통해 사용자는 동시에

WPS 테이블에서 검색 중인 데이터를 찾을 수 없습니다. 검색 옵션 위치를 확인하세요. Mar 19, 2024 pm 10:13 PM

지능이 지배하는 시대에는 사무용 소프트웨어도 대중화되었으며, 유연성으로 인해 대다수의 직장인이 Wps 형식을 채택합니다. 직장에서는 간단한 양식 작성과 텍스트 입력뿐만 아니라 실제 업무를 완료하기 위해 더 많은 운영 기술을 습득해야 합니다. 데이터가 포함된 보고서와 양식을 사용하는 것이 더욱 편리하고 명확하며 정확합니다. 오늘 우리가 당신에게 전하는 교훈은: WPS 테이블이 당신이 찾고 있는 데이터를 찾을 수 없다는 것입니다. 왜 검색 옵션 위치를 확인해야 합니까? 1. 먼저 Excel 테이블을 선택하고 두 번 클릭하여 엽니다. 그런 다음 이 인터페이스에서 모든 셀을 선택합니다. 2. 그런 다음 이 인터페이스의 상단 도구 모음에 있는 "파일"에서 "편집" 옵션을 클릭합니다. 3. 둘째, 이 인터페이스에서 "

모바일 타오바오 매장 검색하는 방법 매장명 검색하는 방법 Mar 13, 2024 am 11:00 AM

모바일 타오바오 앱 소프트웨어는 언제 어디서나 구입할 수 있으며, 모든 제품의 가격표가 명확하여 더욱 편리한 쇼핑을 즐길 수 있습니다. 원하는 대로 자유롭게 검색하고 구매할 수 있습니다. 개인 배송 주소와 연락처를 추가하면 택배사에서 쉽게 연락할 수 있으며, 최신 물류 동향도 실시간으로 확인할 수 있습니다. 사용자가 처음 사용하는 경우 제품을 검색하는 방법을 모르면 검색창에 키워드만 입력하면 모든 제품 결과를 자유롭게 찾을 수 있습니다. 에디터는 모바일 타오바오 사용자가 매장 이름을 검색할 수 있는 자세한 온라인 방법을 제공합니다. 1. 먼저 휴대폰에서 타오바오 앱을 열고,

Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 Mar 24, 2024 pm 06:03 PM

Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 소셜 소프트웨어의 인기와 개인 정보 보호 및 보안에 대한 사람들의 강조가 높아지면서 WeChat 복제 기능이 점차 주목을 받고 있습니다. WeChat 복제 기능을 사용하면 사용자가 동일한 휴대폰에서 여러 WeChat 계정에 동시에 로그인할 수 있으므로 관리 및 사용이 더 쉬워집니다. Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 것은 어렵지 않습니다. 다음 단계만 따르면 됩니다. 1단계: 휴대폰 시스템 버전과 WeChat 버전이 요구 사항을 충족하는지 확인하십시오. 먼저 Huawei 휴대폰 시스템 버전과 WeChat 앱이 최신 버전으로 업데이트되었는지 확인하세요.

PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법 Mar 20, 2024 pm 04:54 PM

프로그래밍 언어 PHP는 다양한 프로그래밍 논리와 알고리즘을 지원할 수 있는 강력한 웹 개발 도구입니다. 그중 피보나치 수열을 구현하는 것은 일반적이고 고전적인 프로그래밍 문제입니다. 이 기사에서는 PHP 프로그래밍 언어를 사용하여 피보나치 수열을 구현하는 방법을 소개하고 구체적인 코드 예제를 첨부합니다. 피보나치 수열은 다음과 같이 정의되는 수학적 수열입니다. 수열의 첫 번째와 두 번째 요소는 1이고 세 번째 요소부터 시작하여 각 요소의 값은 이전 두 요소의 합과 같습니다. 시퀀스의 처음 몇 가지 요소

Golang이 어떻게 게임 개발 가능성을 가능하게 하는지 마스터하세요 Mar 16, 2024 pm 12:57 PM

오늘날의 소프트웨어 개발 분야에서 효율적이고 간결하며 동시성이 뛰어난 프로그래밍 언어인 Golang(Go 언어)은 점점 더 개발자들의 선호를 받고 있습니다. 풍부한 표준 라이브러리와 효율적인 동시성 기능으로 인해 게임 개발 분야에서 주목받는 선택이 되었습니다. 이 기사에서는 게임 개발에 Golang을 사용하는 방법을 살펴보고 특정 코드 예제를 통해 Golang의 강력한 가능성을 보여줍니다. 1. 게임 개발에서 Golang의 장점 Golang은 정적인 유형의 언어로서 대규모 게임 시스템을 구축하는 데 사용됩니다.

PHP 게임 요구 사항 구현 가이드 Mar 11, 2024 am 08:45 AM

PHP 게임 요구사항 구현 가이드 인터넷의 대중화와 발전으로 인해 웹 게임 시장이 점점 더 대중화되고 있습니다. 많은 개발자는 PHP 언어를 사용하여 자신만의 웹 게임을 개발하기를 원하며 게임 요구 사항을 구현하는 것이 핵심 단계입니다. 이 문서에서는 PHP 언어를 사용하여 일반적인 게임 요구 사항을 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다. 1. 게임 캐릭터 만들기 웹게임에서 게임 캐릭터는 매우 중요한 요소입니다. 이름, 레벨, 경험치 등 게임 캐릭터의 속성을 정의하고, 이를 운용할 수 있는 방법을 제공해야 합니다.

엑셀 검색 바로가기 키란 무엇인가요? Mar 20, 2024 am 10:52 AM

Excel 검색 바로가기 키가 무엇인지 알고 싶으십니까? 대답은 간단합니다. [Ctrl+F]를 사용하여 빠른 검색을 수행하면 됩니다. 우리는 종종 엑셀을 사용하여 다양한 데이터와 이름을 기록하는데, 이를 변경해야 할 경우 데이터가 너무 많아 검색하기가 상당히 불편할 것입니다. 실제로 빠른 검색 바로가기를 사용하여 변경해야 하는 데이터를 찾을 수 있습니다! 그렇다면 엑셀 검색 단축키는 무엇일까요? 오늘은 업무 시간과 노력을 절약하기 위해 엑셀 표에서 바로가기 검색 키를 사용하는 방법을 가르쳐 드리겠습니다. 여기에서는 데모를 위해 이 버전의 Microsoft Office Excel 2010을 사용하고 있습니다.

See all articles

Ajax 기반의 간단한 검색 구현 방법

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제