HTML、CSS、jQuery を使用して動的な効果を持つ検索ボックスを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQuery を使用して動的な効果を持つ検索ボックスを作成する方法

王林

リリース： 2023-10-25 10:28:57

オリジナル

1167 人が閲覧しました

HTML、CSS、jQuery を使用して動的な効果を持つ検索ボックスを作成する方法

HTML、CSS、jQuery を使用して動的効果のある検索ボックスを作成する方法

現代の Web 開発では、動的効果のある検索ボックスを作成することが一般的なニーズです。エフェクトエフェクト検索ボックス。この検索ボックスには、リアルタイムで検索候補が表示され、ユーザーが入力するとキーワードが自動的に完成します。この記事ではそんな検索ボックスをHTML、CSS、jQueryを使って実装する方法を詳しく紹介します。

HTML 構造の作成

まず、基本的な HTML 構造を作成する必要があります。コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态搜索框</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <h1>动态搜索框</h1>
    <input type="text" id="search-input" placeholder="请输入关键词">
    <ul id="suggestion-list"></ul>
  </div>

  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

ログイン後にコピー

この HTML 構造には、タイトルと検索用の入力ボックスを含むコンテナ div が含まれています。検索候補を表示するための ul 要素も作成しました。

CSS スタイルを記述する

次に、検索ボックスをより美しく見せるために、検索ボックスにいくつかの基本スタイルを追加する CSS スタイルを記述する必要があります。コードは次のとおりです。

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 24px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

#suggestion-list {
  text-align: left;
  list-style-type: none;
  padding: 0;
  display: none;
}

#suggestion-list li {
  padding: 10px;
  background-color: #f2f2f2;
  cursor: pointer;
}

#suggestion-list li:hover {
  background-color: #e3e3e3;
}

ログイン後にコピー

これらの CSS スタイルは、コンテナ、タイトル、入力ボックス、および検索候補リストに適切なスタイルを追加して、よりプロフェッショナルな外観にします。

検索候補の機能を追加する

次に、jQuery を使用して検索候補の機能を実装する必要があります。コードは次のとおりです:

$(document).ready(function() {
  $('#search-input').keyup(function() {
    var keyword = $(this).val();
    if (keyword !== '') {
      $.ajax({
        url: 'suggestion.php',
        type: 'POST',
        data: { keyword: keyword },
        success: function(data) {
          if (data.trim() !== '') {
            $('#suggestion-list').html(data).show();
          } else {
            $('#suggestion-list').html('').hide();
          }
        }
      });
    } else {
      $('#suggestion-list').html('').hide();
    }
  });

  $(document).on('click', '#suggestion-list li', function() {
    var suggestion = $(this).text();
    $('#search-input').val(suggestion);
    $('#suggestion-list').html('').hide();
  });
});

ログイン後にコピー

このコードは、まず入力ボックスのキーボードイベントをリッスンします。ユーザーが入力すると、AJAX を使用して、suggest.php という名前のバックエンドファイルにリクエストを送信し、ユーザーが入力したキーワードがバックエンドに送信されます。バックエンドは対応する検索候補を返し、フロントエンドは返されたデータに基づいて検索候補リストを動的に更新します。

ユーザーが検索候補リスト内の項目をクリックすると、項目の内容が入力ボックスに入力され、検索候補リストが非表示になります。

バックエンドコードを作成する (suggestion.php)

バックエンドコードについては、PHP またはその他のサーバーサイド言語を使用して実装できます。それ。ここでは、PHP を例として簡単なサンプルコードを示します。

<?php
$keyword = $_POST['keyword'];

// 从数据库或其他数据源获取搜索建议
$suggestions = array(
  '苹果',
  '香蕉',
  '橙子',
  '草莓',
  '葡萄',
  '西瓜',
  '梨',
  '柚子'
);

$output = '';
foreach ($suggestions as $s) {
  if (strpos($s, $keyword) !== false) {
    $output .= '<li>' . $s . '</li>';
  }
}

echo $output;
?>

ログイン後にコピー

このコードは、フロントエンドから渡されたキーワードを受け取り、キーワードに基づいてデータベースまたはその他のデータソースから一致する検索候補を取得します。次に、提案は必要な形式で HTML リスト項目に結合され、フロントエンドに返されます。

実行

上記のコードを対応するファイルとして保存し、対応する CSS および JavaScript ライブラリをインポートした後、ブラウザを開いて HTML ファイルを実行すると、バンドダイナミック効果のある検索ボックス。

概要

HTML、CSS、jQuery を使用すると、動的な効果を持つ検索ボックスを簡単に作成できます。ユーザー入力を監視し、AJAX リクエストをバックエンドに送信して検索候補を取得し、検索候補リストを動的に更新することにより、ユーザーは検索候補を簡単に選択したり、キーワードを直接入力して検索したりできます。この検索ボックスは、さまざまな Web サイトの検索機能で使用して、ユーザーにより良いエクスペリエンスを提供できます。

以上がHTML、CSS、jQuery を使用して動的な効果を持つ検索ボックスを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。