jqueryは自動プロンプト機能を実装します

最新の Web アプリケーションでは、自動プロンプト機能は最も基本的な機能の 1 つです。自動プロンプトを使用すると、ユーザーは入力ボックスにコンテンツを入力するときにスマート プロンプトを簡単に受け取ることができ、入力速度が向上するため、ユーザーが結果を読み込むまでの時間を大幅に短縮できます。

それでは、jQuery を使用して自動プロンプト機能を実装するにはどうすればよいでしょうか?具体的な導入プロセスを以下に紹介します。

1. 準備作業
実装を開始する前に、まず jQuery ライブラリと関連する CSS ファイルを準備する必要があります。公式 Web サイトからライブラリ ファイルをダウンロードして HTML ファイルに導入することも、CDN を使用してライブラリ ファイルの読み込み速度を高速化することもできます。

CSS ファイルに関しては、Bootstrap が提供するスタイルを使用して、プロンプト ボックスの外観を美しくすることができます。ただし、この手順は必須ではありません。スタイルを美化する必要がない場合は、スタイルファイルをインポートする必要はありません。

2. データの取得
自動プロンプトはデータ ソースを提供する必要があります。つまり、ユーザーがコンテンツを入力すると、入力コンテンツに関連するプロンプト情報がデータ ソースから取得され、プロンプトの前に表示されます。ユーザー。このデータ ソースには、JSON ファイル、データベース テーブル、または API インターフェイスを使用できます。

この例では、単純な JSON ファイルをデータ ソースとして使用します。このファイルにはいくつかの都市の名前が含まれており、ユーザーが入力するとスマート ヒントが提供されます。

ファイルの導入に関しては、AJAX メソッドを使用してサーバーから JSON データを取得できます。便宜上、ここでは HTML ファイルに直接導入します。

3. コードを書く
次に、コードを書き始めます。

1. HTML 構造

HTML 構造では、スマート プロンプトのコンテンツを表示するための入力ボックスとプロンプト ボックスが必要です。具体的な構造は次のとおりです。

<input id="search-box" type="text" placeholder="输入城市名" />
<div id="suggestion-box"></div>

2. jQuery コード

まず、ドキュメントが読み込まれた後にテキスト ボックスとプロンプト ボックスの要素を取得し、テキスト ボックスの keyup イベント。このイベントは、ユーザーが入力するとトリガーされます。

次に、入力ごとに、入力内容に関連するプロンプト情報をデータ ソースから取得し、プロンプト ボックスに表示する必要があります。

具体的なコードは次のとおりです。

$(document).ready(function() {
  // 获取输入框和提示框元素
  var searchBox = $('#search-box');
  var suggestionBox = $('#suggestion-box');

  // 绑定 keyup 事件
  searchBox.keyup(function() {
    // 获取输入框的值
    var currentText = searchBox.val();

    // 根据输入框的值从数据源中获取匹配的提示信息
    var filteredData = data.filter(function(item) {
        return item.toLowerCase().indexOf(currentText.toLowerCase()) > -1;
    });

    // 根据获取到的提示信息生成提示框的内容
    var html = '';
    for (var i = 0; i < filteredData.length; i++) {
        html += '<div class="item">' + filteredData[i] + '</div>';
    }

    // 将生成的内容填充到提示框中
    suggestionBox.html(html);
  });
});

このうち、data はデータ ソースから取得した情報を格納するために使用されるグローバル変数を表します。ここでは、都市名を含む配列として単純に定義します。具体的な内容は次のとおりです:

var data = ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都'];

4. CSS スタイル

JavaScript コードに加えて、いくつかの CSS スタイルは次のとおりです。プロンプトボックスを美しくするために必要です。ここでは、Bootstrap によって提供されるスタイルを使用し、コードは次のとおりです:

#suggestion-box {
  position: relative;
  z-index: 999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
}

#suggestion-box .item {
  padding: 5px 10px;
  font-size: 14px;
}

#suggestion-box .item:hover {
  background: #f5f5f5;
}

IV. 概要

上記のコードを通じて、ユーザーに提供できる単純な自動プロンプト機能を実装しました。インテリジェントなプロンプトと入力速度を高速化します。もちろん、実際のアプリケーションでは、キャッシュを使用してデータ ソースへのアクセスを高速化したり、非同期読み込みを使用してページのブロックを回避したりするなど、さらに最適化作業を行うことができます。

以上がjqueryは自動プロンプト機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。