HTML、CSS、jQuery を使用して動的なテキスト入力ボックスプロンプトを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQuery を使用して動的なテキスト入力ボックスプロンプトを作成する方法

王林

リリース： 2023-10-24 09:16:49

オリジナル

1440 人が閲覧しました

HTML、CSS、jQuery を使用して動的なテキスト入力ボックスプロンプトを作成する方法

HTML、CSS、および jQuery を使用して動的テキスト入力ボックスプロンプトを作成する方法

Web 開発では、動的テキスト入力ボックスプロンプトは、ユーザーにより良いサービスを提供するためによく使用されます。経験。可能な入力オプションをリアルタイムで表示することで、ユーザーが適切なコンテンツを素早く選択できるようになります。この記事では、HTML、CSS、jQuery を使用して動的なテキスト入力ボックスプロンプトを作成し、ユーザーの対話エクスペリエンスを向上させる方法を説明します。

この機能を実装するには、HTML、CSS、および jQuery を使用する必要があります。まず、以下に示すような単純な 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">
        <label for="input">请输入内容</label>
        <input type="text" id="input" autocomplete="off">
        <ul id="suggestions"></ul>
    </div>

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

ログイン後にコピー

上記の HTML コードでは、入力ボックスと、提案されたコンテンツを表示する順序なしリストを含むコンテナーを作成します。ラベルを追加すると、入力ボックスに関連するプロンプト情報を提供できます。

次に、入力ボックスと提案されたコンテンツを美しくするための CSS スタイルを記述する必要があります。 styles.css ファイルに、次のコードを追加できます。

.container {
    position: relative;
    width: 300px;
    margin: 0 auto;
    padding-top: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

ul li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

ログイン後にコピー

上記の CSS コードでは、コンテナ全体のスタイルを設定し、入力ボックスと提案されたコンテンツに変更を加えます。基本的なスタイルの定義。ユーザーがコンテンツを入力したときに動的に表示できるように、推奨コンテンツリストの表示ステータスを display: none; に設定していることに注意してください。

最後に、jQuery を使用して、テキスト入力ボックスのプロンプト機能を実装するいくつかのスクリプトを作成する必要があります。 script.js ファイルに次のコードを追加できます。

$(document).ready(function() {
    $('#input').on('input', function() {
        var input = $(this).val().toLowerCase();
        
        if (input.length > 0) {
            $('#suggestions').empty().show();
            
            // 模拟异步获取建议内容
            setTimeout(function() {
                var suggestions = ['apple', 'banana', 'cherry', 'durian', 'elderberry', 'fig', 'grape', 'honeydew'];
                
                suggestions.forEach(function(item) {
                    if (item.indexOf(input) > -1) {
                        $('<li>').text(item).appendTo('#suggestions');
                    }
                });
            }, 300);
        } else {
            $('#suggestions').empty().hide();
        }
    });
    
    $('body').on('click', '#suggestions li', function() {
        var text = $(this).text();
        $('#input').val(text);
        $('#suggestions').empty().hide();
    });
});

ログイン後にコピー

上記の JavaScript コードでは、最初に $('#input').on(' を渡します。 input', function() { ... }) 入力ボックスの入力イベントを監視します。ユーザーが入力を開始すると、入力内容を取得し、その内容に基づいて推奨されるフィルタリングと表示を実行します。実際の提案コンテンツの取得をシミュレートするために、タイマーを使用し、いくつかのサンプル提案コンテンツを定義しました。

ユーザーがおすすめコンテンツ内のアイテムをクリックすると、選択したアイテムのコンテンツが入力ボックスに入力され、おすすめコンテンツのリストが非表示になります。

これまでに、動的テキスト入力ボックスプロンプトの実装が完了しました。 HTML、CSS、jQuery を組み合わせることで、ユーザーの入力時に一致する候補をリアルタイムで表示することで、ユーザーエクスペリエンスを向上させることができます。

この記事が、HTML、CSS、および jQuery を使用して動的テキスト入力ボックスプロンプトを作成する方法を理解するのに役立ち、参考として具体的なコード例を提供することを願っています。 Web開発での成功を祈っています！

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