基于ajax的简单搜索实现方法
这篇文章主要介绍了基于ajax的简单搜索实现方法,结合实例形式较为详细的分析了ajax调用实现搜索功能的具体步骤与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了基于ajax的简单搜索实现方法。分享给大家供大家参考，具体如下：
这里使用两个.aspx文件，一个叫Default.aspx,一个叫AjaxOperations.aspx,第一个用来输入搜索数据，后一个用来对搜索关键字进行处理。js文件夹下面还有一个testJs.js的文件，它就是ajax操作的核心部分。不错，code is cheap。看代码：
testJs.js
// 此函数等价于document.getElementById /document.all
function $(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");
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 = ''; };
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);
}
}
// 清空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[] { '#' }));
}
}
}
}上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 基于ajax的简单搜索实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei?
Mar 24, 2024 am 11:27 AM
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak
Jadual WPS tidak dapat mencari data yang anda cari, sila semak lokasi pilihan carian
Mar 19, 2024 pm 10:13 PM
Dalam era yang dikuasai oleh kecerdasan, perisian pejabat juga telah menjadi popular, dan borang Wps diterima pakai oleh majoriti pekerja pejabat kerana fleksibiliti mereka. Di tempat kerja, kita dikehendaki bukan sahaja untuk belajar membuat borang yang mudah dan memasukkan teks, tetapi juga untuk menguasai lebih banyak kemahiran operasi untuk menyelesaikan tugasan dalam kerja sebenar Laporan dengan data dan menggunakan borang adalah lebih mudah, jelas dan tepat. Pelajaran yang kami bawa kepada anda hari ini ialah: Jadual WPS tidak dapat mencari data yang anda cari. Mengapa sila semak lokasi pilihan carian? 1. Mula-mula pilih jadual Excel dan klik dua kali untuk membukanya. Kemudian dalam antara muka ini, pilih semua sel. 2. Kemudian dalam antara muka ini, klik pilihan "Edit" dalam "Fail" dalam bar alat atas. 3. Kedua, dalam antara muka ini, klik "
Bagaimana untuk mencari kedai di Taobao mudah alih Bagaimana untuk mencari nama kedai
Mar 13, 2024 am 11:00 AM
Perisian aplikasi Taobao mudah alih menyediakan banyak produk yang bagus Anda boleh membelinya pada bila-bila masa dan di mana-mana sahaja, dan semuanya adalah tulen. Anda boleh mencari dan membeli secara bebas mengikut kehendak anda. Bahagian produk dalam kategori yang berbeza semuanya terbuka pengguna menggunakannya untuk kali pertama Jika anda tidak tahu bagaimana untuk mencari produk, sudah tentu anda hanya perlu memasukkan kata kunci dalam bar carian untuk mencari semua hasil produk Anda tidak boleh berhenti membeli-belah editor akan menyediakan kaedah dalam talian terperinci untuk pengguna Taobao mudah alih mencari nama kedai. 1. Mula-mula buka aplikasi Taobao pada telefon bimbit anda,
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei
Mar 24, 2024 pm 06:03 PM
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.
Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci
Mar 20, 2024 pm 04:54 PM
Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan
Kuasai cara Golang mendayakan kemungkinan pembangunan permainan
Mar 16, 2024 pm 12:57 PM
Dalam bidang pembangunan perisian hari ini, Golang (bahasa Go), sebagai bahasa pengaturcaraan yang cekap, ringkas dan sangat bersesuaian, semakin digemari oleh pembangun. Perpustakaan standardnya yang kaya dan ciri-ciri konkurensi yang cekap menjadikannya pilihan berprofil tinggi dalam bidang pembangunan permainan. Artikel ini akan meneroka cara menggunakan Golang untuk pembangunan permainan dan menunjukkan kemungkinan besarnya melalui contoh kod tertentu. 1. Kelebihan Golang dalam pembangunan permainan Sebagai bahasa yang ditaip secara statik, Golang digunakan dalam membina sistem permainan berskala besar.
Panduan Pelaksanaan Keperluan Permainan PHP
Mar 11, 2024 am 08:45 AM
Panduan Pelaksanaan Keperluan Permainan PHP Dengan populariti dan perkembangan Internet, pasaran permainan web menjadi semakin popular. Ramai pembangun berharap untuk menggunakan bahasa PHP untuk membangunkan permainan web mereka sendiri, dan melaksanakan keperluan permainan adalah langkah utama. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk melaksanakan keperluan permainan biasa dan menyediakan contoh kod khusus. 1. Cipta watak permainan Dalam permainan web, watak permainan adalah elemen yang sangat penting. Kita perlu mentakrifkan atribut watak permainan, seperti nama, tahap, nilai pengalaman, dll., dan menyediakan kaedah untuk mengendalikannya
Apakah kekunci pintasan carian Excel?
Mar 20, 2024 am 10:52 AM
Ingin tahu apakah kekunci pintasan carian Excel? Jawapannya mudah, hanya gunakan [Ctrl+F] untuk melakukan carian pantas. Kami sering menggunakan Excel untuk merekodkan banyak data dan nama yang berbeza Jika kami perlu menukarnya, ia akan menyusahkan kami untuk mencari kerana terdapat terlalu banyak data, dan agak menyusahkan untuk mencari. Malah, kita boleh menggunakan pintasan carian pantas untuk mencari data yang perlu kita ubah! Jadi, apakah kekunci pintasan carian dalam Excel? Hari ini saya akan mengajar anda cara menggunakan kekunci carian pintasan dalam jadual excel untuk menjimatkan masa dan usaha anda dalam kerja anda. Di sini saya menggunakan versi Microsoft Office excel 2010 ini untuk demonstrasi Pelajar yang memerlukannya boleh
