jqueryはBaiduに似た検索ボックスを実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryはBaiduに似た検索ボックスを実装します

小云云

Dec 04, 2017 am 10:42 AM

jquery 検索百度

開発者として、Web サイトを開発するときに検索ボックスも不可欠な機能です。この記事では、Baidu の検索ボックスのような検索ボックスを作成する必要があります。 Baidu の検索バーに似た検索ボックス。

これは 2 つの機能を実現する必要があります:

1. キーワードを入力し、一致するドロップダウンリストを表示します

2. 一致する項目を選択し、関連するコンテンツを見つけます

この検索バーは一般的な電子メールでもよく使用されます。 -コマース Web サイトまず、分析機能を実装するには、キーワードを入力すると、一致するアイテムのリストがすぐに表示されます。この機能を実装するには、入力ボックスに「input」イベントをバインドし、非同期リクエストを送信する必要があります。ページ上にデータを表示するための背景。マウスまたは上下キーを使用して一致する項目を選択し、「検索」をクリックするか「Enter」キーを押して特定の結果を検索します。ここでは 2 つの非同期リクエストが使用されています。1 つ目は一致するアイテムをリクエストし、2 つ目は検索結果をリクエストします。キーボード、マウス、および入力ボックスのイベントを監視する必要があるため、同様のさまざまなニーズに適応することも考慮する必要があります。実装は次のように行われます。

1.html と css

<body>
    <div id="search-form"></div>
</body>
<style type="text/css">
    *{margin: 0;padding: 0;list-style:none;border:none;}
    body {
        font-family: "microsoft yahei" !important;
        background-color: #FDFFE0;
    }
    :focus {
        outline: none;
    }
    #search-form {
        position: relative;
        top: 50px;
        display: inline;
    }
</style>

ログイン後にコピー

2. CSS ファイルと js ファイルをインポートします

ブログではファイルをアップロードできないため、私の git: http://git.oschina.net/manliu.com/search_frame にアクセスして、完全なプロジェクトファイル

3. ページ参照 js

<script type="text/javascript">
var proposals = [&#39;百度1&#39;, &#39;百度2&#39;, &#39;百度3&#39;, &#39;百度4&#39;, &#39;百度5&#39;, &#39;百度6&#39;, &#39;百度7&#39;,&#39;17素材网&#39;,&#39;百度&#39;,&#39;新浪&#39;];
$(document).ready(function(){
    $(&#39;#search-form&#39;).complete({
        searchIn:function(val){//传入输入值，返回匹配值
            /* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/;
            return reg.test(val); */
            var word = "^"+val+".*";
            var rs = [];
            $.each(proposals,function(i,n){
                if(n.match(word)){
                    rs.push(n);
                }
            });
            return rs;
        },
        width:400,
        height: 30,
        submitIn: function(text){//搜索选定的值
            alert(text);        
        }
    });
});
</script>

ログイン後にコピー

ここでは、一致する項目を返すために searchIn メソッドが使用され、データはバックグラウンドから取得され、複雑な場合は配列が返されます。ソースコードを変更する必要があります。submitIn は検索に使用されます。通常、一致する結果は非同期または同期で要求できます。

上記の内容は、Baidu のような検索ボックスを実装するためのクエリに関するチュートリアルです。皆様のお役に立てれば幸いです。

ホット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）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7412

CakePHP チュートリアル

1359

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

2か月後、人型ロボットWalker Sが服をたたむことができるようになった Apr 03, 2024 am 08:01 AM

Machine Power Report 編集者: Wu Xin 国内版の人型ロボット + 大型模型チームは、衣服を折りたたむなどの複雑で柔軟な素材の操作タスクを初めて完了しました。 OpenAIのマルチモーダル大規模モデルを統合したFigure01の公開により、国内同業者の関連動向が注目を集めている。つい昨日、中国の「ヒューマノイドロボットのナンバーワン株」であるUBTECHは、Baidu Wenxinの大型モデルと深く統合されたヒューマノイドロボットWalkerSの最初のデモを公開し、いくつかの興味深い新機能を示した。 Baidu Wenxin の大規模モデル機能の恩恵を受けた WalkerS は次のようになります。 Figure01 と同様に、WalkerS は動き回るのではなく、机の後ろに立って一連のタスクを完了します。人間の命令に従って服をたたむことができる

Deepseek Webバージョンの入り口Deepseek公式ウェブサイトの入り口 Feb 19, 2025 pm 04:54 PM

DeepSeekは、Webバージョンと公式Webサイトの2つのアクセス方法を提供する強力なインテリジェント検索および分析ツールです。 Webバージョンは便利で効率的であり、公式ウェブサイトは包括的な製品情報、ダウンロードリソース、サポートサービスを提供できます。個人であろうと企業ユーザーであろうと、DeepSeekを通じて大規模なデータを簡単に取得および分析して、仕事の効率を向上させ、意思決定を支援し、イノベーションを促進することができます。

百度西陽貝殻の入手方法を紹介 Mar 28, 2024 am 09:11 AM

西浪には貝殻の場所と入手方法が分からないユーザーがたくさんいます。数時間探してもまだ見つからないプレイヤーもいます。以下では、編集者が百度西陽貝殻の入手方法を紹介します。 . ぜひ見に来てください。 Baidu Xirang Shell の入手方法 1. まずコミュニティに来てから、下の写真の場所に来る必要があります。 2. ここで目的地を選択し、188階に入るを選択します。 3. 188 階に入った後、歩いているとこのプロンプトが表示されるので、「了解しました」をクリックします。 4. 砲弾の場所は少し見つけにくいですが、188 エレベーターのすぐ後ろに、砲弾である小さな光る点があります。 5. 貝殻をクリックするには VR コントローラーを使用する必要があります。引き換え方法 1. まず、ページ右上隅の「設定」アイコンをクリックし、「」を選択します。

Baidu Apollo、L4自動運転に対応した世界初の大型モデル「Apollo ADFM」を発売 Jun 04, 2024 pm 08:01 PM

5月15日、Baidu Apolloは武漢Baidu キャロット Auto Robot Zhixing Valleyで2024年アポロデーを開催し、過去10年間におけるBaiduの自動運転における大きな進歩を包括的に実証し、大型モデルと乗客の安全性の新たな定義に基づいた技術的飛躍をもたらした。世界最大の自動運転ネットワークである百度は、自動運転を人間の運転よりも安全なものにしました。このおかげで、より安全、より快適、環境に優しい、低炭素の旅行方法が理想から現実へと変わりつつあります。百度グループ副社長兼インテリジェント・ドライビング・ビジネス・グループ社長の王雲鵬氏はその場で「自動運転車を開発するという私たちの本来の目的は、より良い旅行への人々の高まる切望を満たすことだ。人々の満足こそが私たちの原動力である。なぜなら安全性、とても美しいので、見ることができて嬉しいです

Excelの検索ショートカットキーとは何ですか？ Mar 20, 2024 am 10:52 AM

Excel の検索ショートカットキーについて知りたいですか?答えは簡単です。[Ctrl+F] を使用してクイック検索を実行するだけです。 Excelを使って色々なデータや名前を記録することが多いのですが、もし変更する必要がある場合、データが多すぎて検索するのが大変で不便です。実際、クイック検索ショートカットを使用して、変更する必要があるデータを見つけることができます。では、Excelの検索ショートカットキーとは何でしょうか？今日は、Excel の表でショートカット検索キーを使用して、作業の時間と労力を節約する方法を説明します。ここでは、デモ用にこのバージョンの Microsoft Office Excel 2010 を使用しています。必要な学生はこれを使用できます。

Alibaba Cloud Disk で他の人のリソースを検索する方法 Mar 30, 2024 am 10:31 AM

この人気のストレージツールである Alibaba Cloud Disk は、個人リソースを効率的に管理できるだけでなく、多くの便利な機能も提供します。多くのユーザーは検索時にクラウドディスクリソースを見つけることができないため、ディスク全体のすべてのリソースを検索したいと考えていますので、以下では、このサイトの編集者がこの質問に詳しく答え、具体的な検索方法を共有します。知りたい場合は、この記事に従って詳細をご覧ください。 Alibaba Cloud Disk で他の人のリソースを検索する方法 1. まず、Alibaba Cloud Disk のフォルダーディレクトリでリソースファイルの特定のパスを検索し、対応するフォルダーを見つけます。 2. 次に、ファイル検索機能を使用して、検索したいキーワードを入力して、関連するファイルの内容を見つけます。 3. 次に、リンクを他の人と共有して、直接検索してダウンロードします

百度のロビン・リー氏は石油・ガス業界のインテリジェンスについて話し合うためにチームを率いてペトロチャイナを訪問した May 07, 2024 pm 06:13 PM

5月7日の当サイトのニュースによると、5月6日、百度の創業者兼会長兼最高経営責任者（CEO）のロビン・リー氏がチームを率いて北京の中国石油天然気集団公司（以下、ペトロチャイナ）を訪問し、同社の取締役らと会談した。中国石油総公司の董事長と戴侯良党書記が会談した。両者は協力を強化し、エネルギー産業とデジタルインテリジェンスの深い統合を促進することについて綿密な意見交換を行った。ペトロチャイナはデジタル中国石油総公司の構築を加速し、百度グループとの協力を強化し、エネルギー産業とデジタルインテリジェンスの徹底的な統合を促進し、国家エネルギー安全保障の確保にさらに貢献する。ロビン・リー氏は、大型モデルによって示される「インテリジェントな創発」と理解、生成、論理、記憶といった中核的な機能によって、最先端技術と石油・ガス事業の組み合わせに対する想像力のより広い空間が開かれたと述べた。いつも

NetEase Cloudで近くの人を検索する方法_NetEase Cloudで近くの人を検索する方法 Mar 25, 2024 pm 02:41 PM

1. NetEase Cloud Music アプリを開き、下部にある [マイ] をクリックし、上部にある個人情報バーをクリックします。 2. 以下をクリックします。 3. 次のページで、ページ下部の[その他のユーザー]をクリックします。 4. [近くの人]をクリックして入力します。注: この記事では、Huawei mate40pro 携帯電話を例として取り上げており、EMUI11 システム、NetEase Cloud Music V8.0.00 バージョン、およびその他の Android 携帯電話に適しています。

See all articles