ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML検索ボックス機能
HTML検索ボックス機能
- 墨辰丷オリジナル
- 2018-06-04 14:29:174153ブラウズ
HTMLページの検索機能は主に検索ボックスに文字を入力するために使用されます。この記事を通じてHTMLページの検索機能を共有しますので、必要な方は参考にしてください
私は最近取り組んでいます。多くの人によって変更されたフレームワークについて、私は毎日コードを見て頭がクラクラしていますが、構成可能なフロントエンドを使用してかなりの進歩を遂げたと感じています。 2 つのライブラリのさまざまなデータ範囲を表示します。私はその日にそれを共有しました。今日は、HTML ページの検索機能について説明します。
この機能は主に検索ボックスに文字を入力し、前へおよび次へボタンを押すために使用されます。クエリ領域内の一致する文字は特別なスタイルで自動的にマークされます。その後、前へボタンを押し続けることができます。および [次へ] ボタン 一致する文字を順番にスキャンし、別のパターンを使用して、現在の一致する文字を他の一致する文字から区別します。
フロントエンドの表示はおそらく次のようになります:
html は次のようになります:
<p class="container" style="z-index: 999" id="searchp">
<p class="keyword-search">
查找：
<input id="key" type="text" style="width: 200px;" placeholder="关键词" />
<a href="javascript:void(0);" class="prev" onclick='wordSearch(1)'><i class="c-icon"></i></a>
<a href="javascript:void(0);" class="next" onclick='wordSearch()'><i class="c-icon"></i></a>
</p>
</p>スクリプトコード:
<script>//搜索功能
var oldKey0 = "";
var index0 = -1;var oldCount0 = 0;
var newflag = 0;
var currentLength = 0;
function wordSearch(flg) {
var key = $("#key").val(); //取key值
if (!key) {
return; //key为空则退出
}
getArray();
focusNext(flg);
}
function focusNext(flg) {
if (newflag == 0) {//如果新搜索,index清零
index0 = 0;
}
if (!flg) {
if (oldCount0 != 0) {//如果还有搜索
if (index0 < oldCount0) {//左边如果没走完，走左边
focusMove(index0);
index0++;
} else if (index0 == oldCount0) {//都走完了
index0 = 0;
focusMove(index0);
index0++;
}
else {
index0 = 0;//没确定
focusMove(index0);
index0++;
}
}
} else {
if (oldCount0 != 0) {//如果还有搜索
if (index0 <= oldCount0 && index0 > 0) {//左边如果没走完，走左边
index0--;
focusMove(index0);
} else if (index0 == 0) {//都走完了
index0 = oldCount0;
index0--
focusMove(index0);
}
}
}
}
function getArray() {
newflag = 1;
$(".contrast .result").removeClass("res");
var key = $("#key").val(); //取key值
if (!key) {
oldKey0 = "";
return; //key为空则退出
}
if (oldKey0 != key || $(".current").length != currentLength) {
//重置
index0 = 0;
var index = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
pos0 = new Array();
if ($(".contrast-wrap").hasClass("current")) {
currentLength = $(".current").length;
$(".current .contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换
});
} else {
$(".contrast-wrap").addClass('current');
currentLength = $(".current").length;
$(".contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换
});
}
//$("#key").val(key);
oldKey0 = key;
//$(".contrast .result").each(function () {
// $(this).parents('.contrast-wrap').addClass('current');
// pos0.push($(this).offset().top);
//});
// pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
oldCount0 = $(".contrast .result").length;
newflag = 0;
}
}
function focusMove(index0) {
$(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');
$(".contrast .result:eq(" + index0 + ")").addClass("res");
var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
$(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);
if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
$("html, body").animate({ scrollTop: top - 200 }, 200);
} else {
$("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);
}
}
$('#key').change(function () {
if ($('#key').val() == "") {
index0 = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
oldKey0 = "";
}
});
</script>次に、実装原則を思い出してください:
最初に最後のクエリ結果をクリアします次に、正規表現を使用して、キーの値に基づいて領域内の一致するすべての文字に特別なスタイルを追加します。たとえば、result というクラス名を持つ span タグがメソッドに追加され、odKey0 変数が使用されます。キーの値を記録します (下記) 再入力するときに最初に比較します。同じであれば、次または前の内容を参照する必要があることを意味するため、入力時に正規表現一致を使用する必要はありません。 oldCount0 はクエリの合計数を記録し、newflag は 0 に設定されます (クエリが初めてではない場合、newflag は 1 になります)。
次に、getNext メソッドを入力します。flg は、ユーザーが前または次のボタンを押したかどうかを示します。index0 を使用して、現在表示されている一致する文字を記録し、増加するか減少するか、または 0 に設定されるかを決定します。 oldCount0 より大きいか、0 より小さい場合は、再度開始されます)。
focusMove メソッドは、ページを現在の要素に配置する操作です。
学習した JQuery メソッド:
eq() セレクター: セレクターは、指定されたインデックス値を持つ要素を選択します。例: $(".contrast .result:eq(1)") は、クラス名コントラスト要素のうち、クラス名が result である 2 番目の要素を選択します。 $(".contrast .result:eq(1)")，就是选择类名contrast元素中的第二个类名为result的元素。
parents()方法：元素的所有父元素。$("p").parents('.contrast-wrap')
$("p").parents('.contrast-wrap')、p要素のcontrast-wrapという名前のすべての要素。 replace() メソッド: 選択した要素を指定された HTML コンテンツに置き換えます。選択した要素の要素も置き換えられることに注意してください。 offset() メソッド: ドキュメントに対する一致する要素のオフセット (位置) を返すか、設定します。 scrollTop() メソッド: 一致する要素のスクロール バーの垂直位置を返すか、設定します。 要約: 上記がこの記事の全内容です。皆様の学習に役立つことを願っています。 関連する推奨事項:
HTML5 の postMessage ナレッジ ポイントを使用して、Ajax の POST クロスドメインの問題を解決する
Chart.js の軽量 HTML5 チャート描画ツールライブラリの使い方を詳しく解説
🎜
以上がHTML検索ボックス機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。