ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。