ajaxをベースにした簡易検索実装方法
この記事では、ajax に基づいた簡単な検索実装方法を主に紹介し、検索機能を実装するための ajax 呼び出しの具体的な手順と関連テクニックを詳細に分析します。必要な友人は参考にしてください。この記事
この例では、ajax に基づいた簡単な検索実装方法を説明します。詳細は次のとおりです。
ここでは 2 つの .aspx ファイルが使用されています。1 つは Default.aspx 、もう 1 つは AjaxOperations.aspx という名前です。後者は検索キーワードの処理を実行するために使用されます。 js フォルダーの下には、ajax 操作の中核部分である testJs.js ファイルもあります。はい、コードは安いです。コードを見てください:
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[] { '#' }));
}
}
}
}上記は私がまとめたもので、将来的に皆さんのお役に立てば幸いです。 。
関連記事:
Ajaxを利用したSSHオンラインモールでユーザー名非同期検証を完了
以上がajaxをベースにした簡易検索実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7554
15
1382
52
83
11
24
96
Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?
Mar 24, 2024 am 11:27 AM
Huawei 携帯電話にデュアル WeChat ログインを実装するにはどうすればよいですか?ソーシャルメディアの台頭により、WeChatは人々の日常生活に欠かせないコミュニケーションツールの1つになりました。ただし、多くの人は、同じ携帯電話で同時に複数の WeChat アカウントにログインするという問題に遭遇する可能性があります。 Huawei 社の携帯電話ユーザーにとって、WeChat の二重ログインを実現することは難しくありませんが、この記事では Huawei 社の携帯電話で WeChat の二重ログインを実現する方法を紹介します。まず第一に、ファーウェイの携帯電話に付属するEMUIシステムは、デュアルアプリケーションを開くという非常に便利な機能を提供します。アプリケーションのデュアルオープン機能により、ユーザーは同時に
WPS テーブルで検索しているデータが見つかりません。検索オプションの場所を確認してください。
Mar 19, 2024 pm 10:13 PM
インテリジェンスが支配する時代では、オフィス ソフトウェアも普及し、Wps フォームはその柔軟性により大多数のオフィス ワーカーに採用されています。仕事では、単純な帳票作成や文字入力だけでなく、実際の業務を遂行するためにより高度な操作スキルを習得することが求められており、データ付きの帳票や帳票を利用することで、より便利で明確、正確なものとなります。今日の教訓は、「WPS テーブルでは、検索しているデータが見つかりません。検索オプションの場所を確認してください。なぜですか?」です。 1. まず Excel テーブルを選択し、ダブルクリックして開きます。次に、このインターフェイスですべてのセルを選択します。 2. 次に、このインターフェースで、上部ツールバーの「ファイル」の「編集」オプションをクリックします。 3. 次に、このインターフェースで「」をクリックします。
PHP プログラミング ガイド: フィボナッチ数列を実装する方法
Mar 20, 2024 pm 04:54 PM
プログラミング言語 PHP は、さまざまなプログラミング ロジックやアルゴリズムをサポートできる、Web 開発用の強力なツールです。その中でも、フィボナッチ数列の実装は、一般的で古典的なプログラミングの問題です。この記事では、PHP プログラミング言語を使用してフィボナッチ数列を実装する方法を、具体的なコード例を添付して紹介します。フィボナッチ数列は、次のように定義される数学的数列です。数列の最初と 2 番目の要素は 1 で、3 番目の要素以降、各要素の値は前の 2 つの要素の合計に等しくなります。シーケンスの最初のいくつかの要素
Huawei携帯電話にWeChatクローン機能を実装する方法
Mar 24, 2024 pm 06:03 PM
Huawei 携帯電話に WeChat クローン機能を実装する方法 ソーシャル ソフトウェアの人気と人々のプライバシーとセキュリティの重視に伴い、WeChat クローン機能は徐々に人々の注目を集めるようになりました。 WeChat クローン機能を使用すると、ユーザーは同じ携帯電話で複数の WeChat アカウントに同時にログインできるため、管理と使用が容易になります。 Huawei携帯電話にWeChatクローン機能を実装するのは難しくなく、次の手順に従うだけです。ステップ 1: 携帯電話システムのバージョンと WeChat のバージョンが要件を満たしていることを確認する まず、Huawei 携帯電話システムのバージョンと WeChat アプリが最新バージョンに更新されていることを確認します。
モバイルタオバオで店舗を探す方法 店舗名の検索方法
Mar 13, 2024 am 11:00 AM
タオバオのモバイルアプリには良い商品がたくさんあります。いつでもどこでも購入でき、すべて正規品です。各商品の価格は明確です。複雑な操作は一切なく、より便利にお買い物をお楽しみいただけます。自由に検索して購入できます さまざまなカテゴリの商品セクションがすべてオープンしています 個人の配送先住所と連絡先番号を追加すると、運送会社から連絡があり、最新の物流動向をリアルタイムで確認できます初めて利用する方、商品の検索方法が分からない方でも、もちろん検索バーにキーワードを入力するだけですべての商品が表示されますので、お買い物はもうやめられません。モバイルタオバオユーザーが店舗名を検索するための詳細なオンライン方法を提供します。 1.まず携帯電話でタオバオアプリを開きます。
Golang がゲーム開発の可能性を可能にする方法をマスターする
Mar 16, 2024 pm 12:57 PM
今日のソフトウェア開発分野では、効率的で簡潔かつ同時実行性の高いプログラミング言語として、Golang (Go 言語) が開発者にますます好まれています。豊富な標準ライブラリと効率的な同時実行機能により、ゲーム開発の分野で注目を集めています。この記事では、ゲーム開発に Golang を使用する方法を検討し、具体的なコード例を通じてその強力な可能性を示します。 1. ゲーム開発における Golang の利点 Golang は静的型付け言語として、大規模なゲーム システムの構築に使用されます。
PHP ゲーム要件実装ガイド
Mar 11, 2024 am 08:45 AM
PHP ゲーム要件実装ガイド インターネットの普及と発展に伴い、Web ゲーム市場の人気はますます高まっています。多くの開発者は、PHP 言語を使用して独自の Web ゲームを開発することを望んでおり、ゲーム要件の実装は重要なステップです。この記事では、PHP 言語を使用して一般的なゲーム要件を実装する方法を紹介し、具体的なコード例を示します。 1. ゲームキャラクターの作成 Web ゲームにおいて、ゲームキャラクターは非常に重要な要素です。ゲームキャラクターの名前、レベル、経験値などの属性を定義し、これらを操作するメソッドを提供する必要があります。
PHP と Ajax: オートコンプリート提案エンジンの構築
Jun 02, 2024 pm 08:39 PM
PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。
