Bagaimana untuk mencipta gesaan kotak input teks dinamik menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Bagaimana untuk mencipta gesaan kotak input teks dinamik menggunakan HTML, CSS dan jQuery

王林

Lepaskan： 2023-10-24 09:16:49

asal

1409 orang telah melayarinya

Bagaimana untuk mencipta gesaan kotak input teks dinamik menggunakan HTML, CSS dan jQuery

Cara membuat gesaan kotak input teks dinamik menggunakan HTML, CSS dan jQuery

Dalam pembangunan web, gesaan kotak input teks dinamik sering digunakan untuk memberikan pengalaman pengguna yang lebih baik. Dengan memaparkan kemungkinan pilihan input dalam masa nyata, anda boleh membantu pengguna memilih kandungan yang betul dengan cepat. Artikel ini akan mengajar anda cara menggunakan HTML, CSS dan jQuery untuk mencipta gesaan kotak input teks dinamik untuk meningkatkan pengalaman interaktif pengguna.

HTML, CSS dan jQuery diperlukan untuk melaksanakan fungsi ini. Mula-mula, kita mulakan dengan mencipta struktur HTML ringkas seperti yang ditunjukkan di bawah:

<!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>

Salin selepas log masuk

Dalam kod HTML di atas, kami mencipta bekas yang mengandungi kotak input dan senarai tidak tertib yang memaparkan kandungan yang dicadangkan. Dengan menambahkan label, kami boleh memberikan maklumat segera yang berkaitan dengan kotak input.

Seterusnya, kami perlu menulis gaya CSS untuk mencantikkan kotak input dan kandungan cadangan kami. Dalam fail styles.css, kami boleh menambah kod berikut: 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;
}

Salin selepas log masuk

在上面的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();
    });
});

Salin selepas log masuk

在上面的JavaScript代码中，我们首先通过$('#input').on('input', function() { ... })rrreee

Dalam kod CSS di atas, kami menetapkan keseluruhan gaya bekas dan membuat beberapa perubahan asas pada kotak input dan kandungan cadangan Definisi gaya . Harap maklum bahawa kami menetapkan status paparan senarai kandungan yang dicadangkan kepada display: none; supaya ia boleh dipaparkan secara dinamik apabila pengguna memasukkan kandungan.

Akhir sekali, kita perlu menggunakan jQuery untuk menulis beberapa skrip untuk melaksanakan fungsi gesaan kotak input teks. Dalam fail script.js, kami boleh menambah kod berikut:

rrreee

Dalam kod JavaScript di atas, kami mula-mula menghantar $('#input').on('input', function() { ... }) untuk mendengar peristiwa input kotak input. Apabila pengguna mula menaip, kami mendapat kandungan input dan melakukan penapisan dan paparan yang disyorkan berdasarkan kandungan. Untuk mensimulasikan pemerolehan kandungan cadangan sebenar, kami menggunakan pemasa dan menentukan beberapa kandungan cadangan sampel.

Apabila pengguna mengklik pada item dalam kandungan yang dicadangkan, kami akan mengisi kandungan item yang dipilih ke dalam kotak input dan menyembunyikan senarai kandungan yang dicadangkan. 🎜🎜Pada ketika ini, kami telah menyelesaikan pelaksanaan gesaan kotak input teks dinamik. Melalui gabungan HTML, CSS dan jQuery, kami boleh meningkatkan pengalaman pengguna dengan memaparkan cadangan padanan dalam masa nyata semasa pengguna menaip. 🎜🎜Saya harap artikel ini dapat membantu anda memahami cara menggunakan HTML, CSS dan jQuery untuk mencipta gesaan kotak input teks dinamik dan menyediakan contoh kod khusus untuk rujukan anda. Saya doakan anda berjaya dalam pembangunan web! 🎜

Atas ialah kandungan terperinci Bagaimana untuk mencipta gesaan kotak input teks dinamik menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!