HTML、CSS、jQuery を使用して高度なフォームのオートコンプリート機能を実装する方法

HTML、CSS、jQuery を使用してフォームのオートコンプリートの高度な機能を実装する方法。具体的なコード例が必要です。

ほとんどの Web サイトでは、フォームは完成されています。ユーザーとウェブサイト間のインタラクションの重要な要素の 1 つ。ただし、ユーザーが同じまたは類似のデータをフォームに頻繁に入力する必要がある場合、これは面倒になる可能性があります。ユーザー エクスペリエンスを向上させるために、HTML、CSS、および jQuery を使用してフォームのオートコンプリートの高度な機能を実装すると、ユーザーはフォームにすばやく入力し、入力エラーの可能性を減らすことができます。

今回はHTML、CSS、jQueryを使ってオートコンプリート機能付きフォームを作成する方法を紹介します。ユーザーの都市を入力するフィールドを備えた登録フォームを作成していると仮定して、サンプル シナリオを使用します。 Ajax と JSON を使用して都市データ ソースを取得し、jQuery を使用してオートコンプリート機能を実装します。

まず、HTML 構造を作成しましょう。オートコンプリート オプションを表示するには、入力ボックスとドロップダウン リストが必要です。 HTML コードは次のとおりです。

<input type="text" id="city-input" />
<ul id="city-list"></ul>

次に、入力ボックスとドロップダウン リストにスタイルを追加する必要があります。これは CSS を使用して実現できます。ここには最も基本的なスタイルのみがリストされており、必要に応じて調整できます。

#city-input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
}

#city-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: none; /* 初始状态下隐藏下拉列表 */
  border: 1px solid #ccc;
}

次に、都市データ ソースを取得する必要があります。ここでは、都市データが citys.json という名前の JSON 形式のファイルに保存されていると仮定します。サンプル データ構造は次のとおりです。

[
  {
    "id": 1,
    "name": "北京"
  },
  {
    "id": 2,
    "name": "上海"
  },
  {
    "id": 3,
    "name": "广州"
  }
  // 其他城市数据...
]

jQuery では、Ajax を使用して JSON データを取得するのは非常に簡単です。これを実現するには、jQuery の $.getJSON メソッドを使用します。サンプル コードは次のとおりです。

$.getJSON("cities.json", function(data) {
  // 处理获取的城市数据
});

次に、自動補完機能を実装するコードを記述する必要があります。ユーザーが入力ボックスに入力を開始したら、一致するオートコンプリート オプションを表示するイベントをトリガーする必要があります。 jQuery の keyup イベントを使用してユーザー入力を監視できます。サンプル コードは次のとおりです。

$("#city-input").keyup(function() {
  var searchQuery = $(this).val(); // 获取输入框的值

  if (searchQuery !== "") {
    // 发送Ajax请求获取匹配的城市数据
    $.getJSON("cities.json", function(data) {
      var matchingCities = [];

      // 遍历城市数据，查找匹配的城市
      $.each(data, function(index, city) {
        var cityName = city.name;

        if (cityName.indexOf(searchQuery) !== -1) {
          matchingCities.push(cityName);
        }
      });

      // 显示匹配的城市选项
      showMatchingCities(matchingCities);
    });
  } else {
    // 如果输入框为空，隐藏下拉列表
    hideCityList();
  }
});

上記のコードでは、keyup イベントを使用して入力ボックスの値の変化を監視します。入力ボックスの値が空でない場合は、Ajax リクエストを送信し、都市データを走査して、検索条件を満たす都市を見つけます。次に、これらの都市をドロップダウン リストに表示します。また、2 つの補助関数 showMatchingCities と HideCityList を記述する必要があります。これら 2 つの関数の機能は、それぞれ、一致する都市のオプションを表示し、ドロップダウン リストを非表示にすることです。

function showMatchingCities(cities) {
  var $cityList = $("#city-list");
  $cityList.empty(); // 清空下拉列表中的选项

  // 遍历匹配的城市，创建选项并添加到下拉列表中
  $.each(cities, function(index, cityName) {
    var $cityOption = $("<li>" + cityName + "</li>");
    $cityList.append($cityOption);
  });

  $cityList.show(); // 显示下拉列表
}

function hideCityList() {
  var $cityList = $("#city-list");
  $cityList.hide(); // 隐藏下拉列表
}

最後に、選択した都市を入力ボックスに入力できるように、オートコンプリート オプションのクリック イベントのハンドラー関数を追加する必要もあります。サンプル コードは次のとおりです。

$("#city-list").on("click", "li", function() {
  var cityName = $(this).text();
  $("#city-input").val(cityName);
  hideCityList();
});

上記のコードでは、jQuery の on メソッドを使用してイベントの委任を処理します。ユーザーがドロップダウンのオプションをクリックすると、選択した都市の名前が取得され、入力ボックスに入力されます。次に、ドロップダウンを非表示にします。

上記のコード例を通じて、HTML、CSS、jQuery を使用してフォームのオートコンプリートの高度な機能を実現する方法を確認できます。これらのコードは、さまざまなシナリオやビジネス ニーズに合わせて、必要に応じて調整および拡張できます。フォームの自動補完により、ユーザーの入力労力とエラーが軽減され、ユーザー エクスペリエンスが大幅に向上します。この記事がお役に立てば幸いです!

以上がHTML、CSS、jQuery を使用して高度なフォームのオートコンプリート機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。