Bagaimana untuk mencipta fungsi ramalan carian dinamik menggunakan HTML, CSS dan jQuery

Cara mencipta fungsi persatuan carian dinamik menggunakan HTML, CSS dan jQuery

Dengan perkembangan Internet, fungsi carian telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian kita. Untuk meningkatkan pengalaman carian pengguna, fungsi perkaitan carian dinamik telah menjadi keperluan biasa. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta fungsi ramalan carian yang mudah dan berkesan, dan menyediakan contoh kod khusus.

1. Persediaan

Pertama sekali, kita perlu menyediakan sumber yang berkaitan. Pastikan anda memasang versi terkini jQuery dan dalam halaman HTML anda tambahkan:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. Struktur HTML

Seterusnya, kita perlu membina struktur HTML. Tambahkan kawasan untuk memaparkan hasil ramalan carian selepas kotak input, contohnya:

<input type="text" id="searchInput" placeholder="输入关键词">
<div id="suggestions"></div>

3. Gaya CSS

Untuk menjadikan hasil ramalan carian muncul dalam gaya yang sesuai pada halaman, kami perlu menambah beberapa gaya CSS . Berikut ialah contoh CSS mudah:

#suggestions {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 200px;
    display: none;
    z-index: 999;
}

#suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#suggestions li {
    padding: 10px;
    cursor: pointer;
}

#suggestions li:hover {
    background-color: #f0f0f0;
}

Kod CSS ini akan menyediakan beberapa penggayaan asas untuk kawasan paparan hasil ramalan carian.

4. pelaksanaan jQuery

Sekarang, mari kita laksanakan fungsi persatuan carian. Berikut ialah contoh kod asas:

$(document).ready(function() {
    $('#searchInput').on('input', function() {
        var keyword = $(this).val();
        
        if (keyword.length >= 1) {
            // 发送Ajax请求到后端，获取搜索联想结果
            $.ajax({
                url: 'search_suggestions.php', // 替换为你的后端接口地址
                type: 'GET',
                dataType: 'json',
                data: { keyword: keyword },
                success: function(response) {
                    if (response.length > 0) {
                        var suggestions = '';
                        
                        // 构建搜索联想结果列表
                        for(var i = 0; i < response.length; i++) {
                            suggestions += '<li>' + response[i] + '</li>';
                        }
                        
                        // 将搜索联想结果显示在页面上
                        $('#suggestions').html('<ul>' + suggestions + '</ul>').show();
                    } else {
                        $('#suggestions').hide();
                    }
                },
                error: function() {
                    // 错误处理
                }
            });
        } else {
            $('#suggestions').hide();
        }
    });
    
    // 监听对搜索联想结果的点击事件
    $(document).on('click', '#suggestions li', function() {
        var suggestion = $(this).text();
        
        // 将选中的搜索联想结果填充到输入框中
        $('#searchInput').val(suggestion);
        
        $('#suggestions').hide();
    });
    
    // 点击页面其他区域时隐藏搜索联想结果
    $(document).on('click', function(e) {
        if (!$(e.target).is('#searchInput')) {
            $('#suggestions').hide();
        }
    });
});

Dalam kod ini, kami mula-mula mendengar peristiwa input kotak input Sebaik sahaja terdapat input teks dalam kotak input, kami menghantar permintaan ke bahagian belakang melalui Ajax untuk mendapatkan carian keputusan persatuan. Kemudian, senarai hasil ramalan carian dibina berdasarkan hasil yang dikembalikan oleh bahagian belakang dan dipaparkan pada halaman.

Pada masa yang sama, kami juga memantau acara klik item senarai hasil ramalan carian Apabila pengguna mengklik pada hasil ramalan, hasilnya diisi ke dalam kotak input dan hasil ramalan carian disembunyikan.

Akhir sekali, kami juga memantau acara klik di kawasan lain halaman Apabila pengguna mengklik pada kawasan lain halaman, hasil perkaitan carian disembunyikan.

5. Pemprosesan belakang

Bahagian permintaan Ajax dalam kod di atas perlu diganti mengikut situasi sebenar Secara amnya, bahagian belakang diperlukan untuk memproses logik perkaitan carian dan mengembalikan hasil perkaitan yang berkaitan. Anda boleh mengubah suai kod mengikut situasi sebenar bahagian belakang.

Di atas ialah langkah terperinci dan contoh kod khusus untuk menggunakan HTML, CSS dan jQuery untuk mencipta fungsi perkaitan carian dinamik. Melalui fungsi ini, pengguna boleh mendapatkan hasil perkaitan carian yang berkaitan dalam masa nyata semasa proses memasukkan kata kunci, yang meningkatkan kemudahan dan ketepatan carian. Harap artikel ini membantu anda!

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