Tutorial: Menambahkan halaman ke hasil pencarian menggunakan .NET SDK

Pelajari cara menerapkan dua sistem paging yang berbeda, yang pertama berdasarkan nomor halaman dan yang kedua pada pengguliran tak terbatas. Kedua sistem paging banyak digunakan, dan memilih yang tepat tergantung pada pengalaman pengguna yang Anda inginkan dengan hasilnya.

Dalam tutorial ini, Anda akan mempelajari cara:

  • Perluas aplikasi Anda dengan penomoran halaman
  • Perluas aplikasi Anda dengan pengguliran tanpa batas

Gambaran Umum

Tutorial ini mengintegrasikan sistem penomoran halaman dalam proyek yang sebelumnya dibuat seperti dijelaskan dalam tutorial Membuat aplikasi pencarian pertama Anda.

Versi kode yang sudah selesai yang akan Anda kembangkan dalam tutorial ini dapat ditemukan dalam proyek berikut:

Prasyarat

Perluas aplikasi Anda dengan penomoran halaman

Penomoran halaman bernomor adalah sistem penomoran pilihan untuk mesin pencari web komersial utama dan banyak situs web pencarian lainnya. Penomoran halaman bernomor biasanya menyertakan opsi "berikutnya" dan "sebelumnya" selain rentang nomor halaman aktual. Juga opsi "halaman pertama" dan "halaman terakhir" mungkin juga tersedia. Opsi ini tentu memberikan kontrol pengguna atas menavigasi melalui hasil berbasis halaman.

Dalam tutorial ini, Anda akan menambahkan sistem yang mencakup opsi pertama, sebelumnya, berikutnya, dan terakhir, bersama dengan nomor halaman yang tidak dimulai dari 1, tetapi sebaliknya mengelilingi halaman saat ini tempat pengguna berada (jadi, misalnya, jika pengguna melihat halaman 10, mungkin nomor halaman 8, 9, 10, 11, dan 12 ditampilkan).

Sistem akan cukup fleksibel untuk memungkinkan jumlah nomor halaman yang terlihat diatur dalam variabel global.

Sistem akan memperlakukan tombol nomor halaman paling kiri dan paling kanan sebagai khusus, yang berarti mereka akan memicu perubahan rentang nomor halaman yang ditampilkan. Misalnya, jika nomor halaman 8, 9, 10, 11 dan 12 ditampilkan, dan pengguna mengklik 8, maka rentang nomor halaman menampilkan perubahan ke 6, 7, 8, 9, dan 10. Dan ada pergeseran yang sama ke kanan jika mereka memilih 12.

Tambahkan bidang pemisahan halaman ke model

Buka solusi halaman pencarian dasar.

  1. Buka file model SearchData.cs.

  2. Tambahkan variabel global untuk mendukung paginasi. Dalam MVC, variabel global dideklarasikan dalam kelas statis mereka sendiri. ResultsPerPage mengatur jumlah hasil per halaman. MaxPageRange menentukan jumlah nomor halaman yang terlihat pada tampilan. PageRangeDelta menentukan berapa banyak halaman yang harus digeser ke kiri atau kanan, saat nomor halaman paling kiri atau paling kanan dipilih. Biasanya jumlah terakhir ini sekitar setengah dari MaxPageRange. Tambahkan kode berikut ke dalam namespace.

    public static class GlobalVariables
    {
        public static int ResultsPerPage
        {
            get
            {
                return 3;
            }
        }
        public static int MaxPageRange
        {
            get
            {
                return 5;
            }
        }
    
        public static int PageRangeDelta
        {
            get
            {
                return 2;
            }
        }
    }
    

    Petunjuk / Saran

    Jika Anda menjalankan proyek ini pada perangkat dengan layar yang lebih kecil, seperti laptop, maka pertimbangkan untuk mengubah ResultsPerPage menjadi 2.

  3. Tambahkan properti halaman ke kelas SearchData , setelah properti searchText .

    // The current page being displayed.
    public int currentPage { get; set; }
    
    // The total number of pages of results.
    public int pageCount { get; set; }
    
    // The left-most page number to display.
    public int leftMostPage { get; set; }
    
    // The number of page numbers to display - which can be less than MaxPageRange towards the end of the results.
    public int pageRange { get; set; }
    
    // Used when page numbers, or next or prev buttons, have been selected.
    public string paging { get; set; }
    

Menambahkan tabel opsi halaman ke tampilan

  1. Buka file index.cshtml, dan tambahkan kode berikut tepat sebelum tag penutup </body> . Kode baru ini menyajikan tabel opsi halaman: pertama, sebelumnya, 1, 2, 3, 4, 5, berikutnya, terakhir.

    @if (Model != null && Model.pageCount > 1)
    {
    // If there is more than one page of results, show the paging buttons.
    <table>
        <tr>
            <td>
                @if (Model.currentPage > 0)
                {
                    <p class="pageButton">
                        @Html.ActionLink("|<", "Page", "Home", new { paging = "0" }, null)
                    </p>
                }
                else
                {
                    <p class="pageButtonDisabled">|&lt;</p>
                }
            </td>
    
            <td>
                @if (Model.currentPage > 0)
                {
                    <p class="pageButton">
                        @Html.ActionLink("<", "PageAsync", "Home", new { paging = "prev" }, null)
                    </p>
                }
                else
                {
                    <p class="pageButtonDisabled">&lt;</p>
                }
            </td>
    
            @for (var pn = Model.leftMostPage; pn < Model.leftMostPage + Model.pageRange; pn++)
            {
                <td>
                    @if (Model.currentPage == pn)
                    {
                        // Convert displayed page numbers to 1-based and not 0-based.
                        <p class="pageSelected">@(pn + 1)</p>
                    }
                    else
                    {
                        <p class="pageButton">
                            @Html.ActionLink((pn + 1).ToString(), "PageAsync", "Home", new { paging = @pn }, null)
                        </p>
                    }
                </td>
            }
    
            <td>
                @if (Model.currentPage < Model.pageCount - 1)
                {
                    <p class="pageButton">
                        @Html.ActionLink(">", "PageAsync", "Home", new { paging = "next" }, null)
                    </p>
                }
                else
                {
                    <p class="pageButtonDisabled">&gt;</p>
                }
            </td>
    
            <td>
                @if (Model.currentPage < Model.pageCount - 1)
                {
                    <p class="pageButton">
                        @Html.ActionLink(">|", "PageAsync", "Home", new { paging = Model.pageCount - 1 }, null)
                    </p>
                }
                else
                {
                    <p class="pageButtonDisabled">&gt;|</p>
                }
            </td>
        </tr>
    </table>
    }
    

    Kami menggunakan tabel HTML untuk menyelaraskan hal-hal dengan rapi. Namun semua operasi berasal dari @Html.ActionLink pernyataan, masing-masing memanggil pengontrol dengan model baru yang dibuat dengan entri yang berbeda ke properti pemrosesan halaman yang kami tambahkan sebelumnya.

    Opsi halaman pertama dan terakhir tidak mengirim string seperti "pertama" dan "terakhir", tetapi sebaliknya mengirim nomor halaman yang benar.

  2. Tambahkan kelas halaman ke daftar gaya HTML dalam file hotels.css. Kelas pageSelected ada untuk mengidentifikasi halaman saat ini (dengan menerapkan format tebal ke nomor halaman) dalam daftar nomor halaman.

    .pageButton {
        border: none;
        color: darkblue;
        font-weight: normal;
        width: 50px;
    }
    
    .pageSelected {
        border: none;
        color: black;
        font-weight: bold;
        width: 50px;
    }
    
    .pageButtonDisabled {
        border: none;
        color: lightgray;
        font-weight: bold;
        width: 50px;
    }
    

Tambahkan tindakan halaman ke pengontrol

  1. Buka file HomeController.cs, dan tambahkan tindakan PageAsync . Tindakan ini merespons salah satu opsi halaman yang dipilih.

    public async Task<ActionResult> PageAsync(SearchData model)
    {
        try
        {
            int page;
    
            switch (model.paging)
            {
                case "prev":
                    page = (int)TempData["page"] - 1;
                    break;
    
                case "next":
                    page = (int)TempData["page"] + 1;
                    break;
    
                default:
                    page = int.Parse(model.paging);
                    break;
            }
    
            // Recover the leftMostPage.
            int leftMostPage = (int)TempData["leftMostPage"];
    
            // Recover the search text and search for the data for the new page.
            model.searchText = TempData["searchfor"].ToString();
    
            await RunQueryAsync(model, page, leftMostPage);
    
            // Ensure Temp data is stored for next call, as TempData only stores for one call.
            TempData["page"] = (object)page;
            TempData["searchfor"] = model.searchText;
            TempData["leftMostPage"] = model.leftMostPage;
        }
    
        catch
        {
            return View("Error", new ErrorViewModel { RequestId = "2" });
        }
        return View("Index", model);
    }
    

    Metode RunQueryAsync sekarang akan menampilkan kesalahan sintaksis, karena parameter ketiga, yang akan kita datangi dalam sedikit.

    Nota

    Panggilan ke TempData menyimpan nilai ( objek) di penyimpanan sementara, meskipun penyimpanan ini hanya bertahan untuk satu panggilan. Jika kita menyimpan sesuatu dalam data sementara, itu akan tersedia untuk panggilan berikutnya ke tindakan pengontrol, tetapi hampir pasti akan hilang pada panggilan berikutnya setelah itu. Karena masa pakai yang singkat ini, kami menyimpan teks pencarian dan properti halaman kembali ke penyimpanan sementara pada setiap panggilan ke PageAsync.

  2. Perbarui tindakan Indeks(model) untuk menyimpan variabel sementara, dan untuk menambahkan parameter halaman paling kiri ke panggilan RunQueryAsync .

    public async Task<ActionResult> Index(SearchData model)
    {
        try
        {
            // Ensure the search string is valid.
            if (model.searchText == null)
            {
                model.searchText = "";
            }
    
            // Make the search call for the first page.
            await RunQueryAsync(model, 0, 0);
    
            // Ensure temporary data is stored for the next call.
            TempData["page"] = 0;
            TempData["leftMostPage"] = 0;
            TempData["searchfor"] = model.searchText;
        }
    
        catch
        {
            return View("Error", new ErrorViewModel { RequestId = "1" });
        }
        return View(model);
    }
    
  3. Metode RunQueryAsync , yang diperkenalkan dalam pelajaran sebelumnya, perlu modifikasi untuk mengatasi kesalahan sintaks. Kami menggunakan bidang Skip, Size, dan IncludeTotalCount dari kelas SearchOptions untuk meminta hanya satu halaman hasil, mulai dari pengaturan Lewati . Kita juga perlu menghitung variabel halaman untuk tampilan kita. Ganti seluruh metode dengan kode berikut.

    private async Task<ActionResult> RunQueryAsync(SearchData model, int page, int leftMostPage)
    {
        InitSearch();
    
        var options = new SearchOptions
        {
            // Skip past results that have already been returned.
            Skip = page * GlobalVariables.ResultsPerPage,
    
            // Take only the next page worth of results.
            Size = GlobalVariables.ResultsPerPage,
    
            // Include the total number of results.
            IncludeTotalCount = true
        };
    
        // Add fields to include in the search results.
        options.Select.Add("HotelName");
        options.Select.Add("Description");
    
        // For efficiency, the search call should be asynchronous, so use SearchAsync rather than Search.
        model.resultList = await _searchClient.SearchAsync<Hotel>(model.searchText, options).ConfigureAwait(false);
    
        // This variable communicates the total number of pages to the view.
        model.pageCount = ((int)model.resultList.TotalCount + GlobalVariables.ResultsPerPage - 1) / GlobalVariables.ResultsPerPage;
    
        // This variable communicates the page number being displayed to the view.
        model.currentPage = page;
    
        // Calculate the range of page numbers to display.
        if (page == 0)
        {
            leftMostPage = 0;
        }
        else if (page <= leftMostPage)
        {
            // Trigger a switch to a lower page range.
            leftMostPage = Math.Max(page - GlobalVariables.PageRangeDelta, 0);
        }
        else if (page >= leftMostPage + GlobalVariables.MaxPageRange - 1)
        {
            // Trigger a switch to a higher page range.
            leftMostPage = Math.Min(page - GlobalVariables.PageRangeDelta, model.pageCount - GlobalVariables.MaxPageRange);
        }
        model.leftMostPage = leftMostPage;
    
        // Calculate the number of page numbers to display.
        model.pageRange = Math.Min(model.pageCount - leftMostPage, GlobalVariables.MaxPageRange);
    
        return View("Index", model);
    }
    
  4. Terakhir, buat perubahan kecil pada tampilan. Variabel resultList.Results.TotalCount sekarang akan berisi jumlah hasil yang dikembalikan dalam satu halaman (3 dalam contoh kami), bukan jumlah total. Karena kita mengatur IncludeTotalCount ke true, variabel resultList.TotalCount sekarang berisi jumlah total hasil. Jadi temukan di mana jumlah hasil ditampilkan dalam tampilan, dan ubah ke kode berikut.

    // Show the result count.
    <p class="sampleText">
        @Model.resultList.TotalCount Results
    </p>
    
    var results = Model.resultList.GetResults().ToList();
    
    @for (var i = 0; i < results.Count; i++)
    {
        // Display the hotel name and description.
        @Html.TextAreaFor(m => results[i].Document.HotelName, new { @class = "box1" })
        @Html.TextArea($"desc{1}", results[i].Document.Description, new { @class = "box2" })
    }
    

    Nota

    Ada sedikit penurunan kinerja saat mengatur IncludeTotalCount ke true, karena total ini perlu dihitung oleh Azure Cognitive Search. Dengan himpunan data yang kompleks, ada peringatan bahwa nilai yang dikembalikan adalah perkiraan. Karena korpus pencarian hotel kecil, itu akan akurat.

Mengkompilasi dan menjalankan aplikasi

Sekarang pilih Mulai Tanpa Debugging (atau tekan tombol F5).

  1. Cari pada string yang mengembalikan banyak hasil (seperti "wifi"). Dapatkah Anda menelusuri hasilnya dengan cermat?

    Penomoran halaman melalui hasil

  2. Coba klik nomor halaman paling kanan, dan kemudian paling kiri. Apakah nomor halaman disesuaikan dengan tepat untuk mempusatkan halaman tempat Anda berada?

  3. Apakah opsi "pertama" dan "terakhir" berguna? Beberapa mesin pencari komersial menggunakan opsi ini, dan yang lain tidak.

  4. Buka halaman terakhir hasil. Halaman terakhir adalah satu-satunya halaman yang mungkin berisi kurang dari hasil ResultsPerPage .

    Memeriksa halaman terakhir wifi

  5. Ketik "kota", dan klik cari. Tidak ada opsi halaman yang ditampilkan jika hasilnya kurang dari satu halaman.

    Mencari

Simpan proyek ini dan lanjutkan ke bagian berikutnya untuk bentuk pengaturan halaman yang alternatif.

Perluas aplikasi Anda dengan infinite scroll

Pengguliran tak terbatas dipicu saat pengguna menggulir bilah gulir vertikal ke hasil terakhir yang ditampilkan. Dalam kejadian ini, panggilan ke layanan pencarian dilakukan untuk halaman hasil berikutnya. Jika tidak ada hasil lagi, tidak ada yang dikembalikan dan bilah gulir vertikal tidak berubah. Jika ada lebih banyak hasil, hasilnya ditambahkan ke halaman saat ini, dan bilah gulir berubah untuk menunjukkan bahwa lebih banyak hasil tersedia.

Poin penting yang perlu diperhatikan adalah bahwa halaman saat ini tidak diganti, melainkan diperluas untuk menampilkan hasil tambahan. Pengguna selalu dapat menggulir kembali ke atas ke hasil pertama pencarian.

Untuk menerapkan pengguliran tak terbatas, mari kita mulai dengan proyek sebelum elemen pengguliran nomor halaman apa pun ditambahkan. Di GitHub, ini adalah solusi FirstAzureSearchApp .

Tambahkan bidang penomoran halaman ke model

  1. Pertama, tambahkan properti halaman ke kelas SearchData (dalam file model SearchData.cs).

    // Record if the next page is requested.
    public string paging { get; set; }
    

    Variabel ini adalah string, yang menyimpan "berikutnya" jika halaman hasil berikutnya harus dikirim, atau null untuk halaman pertama pencarian.

  2. Dalam file yang sama, dan di dalam namespace, tambahkan kelas variabel global dengan satu properti. Dalam MVC, variabel global dideklarasikan dalam kelas statis mereka sendiri. ResultsPerPage mengatur jumlah hasil per halaman.

    public static class GlobalVariables
    {
        public static int ResultsPerPage
        {
            get
            {
                return 3;
            }
        }
    }
    

Menambahkan bilah gulir vertikal ke tampilan

  1. Temukan bagian file index.cshtml yang menampilkan hasilnya (dimulai dengan @if (Model != null)).

  2. Ganti bagian dengan kode di bawah ini. Bagian baru <div> berada di sekitar area yang harus dapat digulir, serta menambahkan atribut overflow-y dan memanggil fungsi onscroll yang disebut "scrolled()", seperti ini.

    @if (Model != null)
    {
        // Show the result count.
        <p class="sampleText">
            @Model.resultList.TotalCount Results
        </p>
    
        var results = Model.resultList.GetResults().ToList();
    
        <div id="myDiv" style="width: 800px; height: 450px; overflow-y: scroll;" onscroll="scrolled()">
    
            <!-- Show the hotel data. -->
            @for (var i = 0; i < results.Count; i++)
            {
                // Display the hotel name and description.
                @Html.TextAreaFor(m => results[i].Document.HotelName, new { @class = "box1" })
                @Html.TextArea($"desc{i}", results[i].Document.Description, new { @class = "box2" })
            }
    
  3. Tepat di bawah perulangan, setelah tag </div> , tambahkan fungsi scrolled.

    <script>
        function scrolled() {
            if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
                $.getJSON("/Home/NextAsync", function (data) {
                    var div = document.getElementById('myDiv');
    
                    // Append the returned data to the current list of hotels.
                    for (var i = 0; i < data.length; i += 2) {
                        div.innerHTML += '\n<textarea class="box1">' + data[i] + '</textarea>';
                        div.innerHTML += '\n<textarea class="box2">' + data[i + 1] + '</textarea>';
                    }
                });
            }
        }
    </script>
    

    Pernyataan if dalam skrip di atas menguji apakah pengguna telah menggulir ke bagian bawah bilah gulir vertikal. Jika mereka memilikinya, panggilan ke pengontrol Beranda dilakukan ke tindakan yang disebut NextAsync. Tidak ada informasi lain yang diperlukan oleh pengontrol, itu akan mengembalikan halaman data berikutnya. Data ini kemudian diformat menggunakan gaya HTML yang identik sebagai halaman asli. Jika tidak ada hasil yang dikembalikan, tidak ada yang ditambahkan dan semuanya tetap seperti adanya.

Mengendalikan tindakan berikutnya

Hanya ada tiga tindakan yang perlu dikirim ke pengontrol: yang pertama kali menjalankan aplikasi, yang memanggil Index(), pencarian pertama oleh pengguna, yang memanggil Index(model), dan kemudian panggilan berikutnya untuk hasil lebih lanjut melalui Next(model).

  1. Buka file pengontrol rumah dan hapus metode RunQueryAsync dari tutorial asli.

  2. Ganti tindakan Indeks(model) dengan kode berikut. Sekarang menangani bidang paging saat null, atau saat diatur ke "berikutnya", dan menangani pemanggilan ke Azure Cognitive Search.

    public async Task<ActionResult> Index(SearchData model)
    {
        try
        {
            InitSearch();
    
            int page;
    
            if (model.paging != null && model.paging == "next")
            {
                // Increment the page.
                page = (int)TempData["page"] + 1;
    
                // Recover the search text.
                model.searchText = TempData["searchfor"].ToString();
            }
            else
            {
                // First call. Check for valid text input.
                if (model.searchText == null)
                {
                    model.searchText = "";
                }
                page = 0;
            }
    
            // Setup the search parameters.
            var options = new SearchOptions
            {
                SearchMode = SearchMode.All,
    
                // Skip past results that have already been returned.
                Skip = page * GlobalVariables.ResultsPerPage,
    
                // Take only the next page worth of results.
                Size = GlobalVariables.ResultsPerPage,
    
                // Include the total number of results.
                IncludeTotalCount = true
            };
    
            // Specify which fields to include in results.
            options.Select.Add("HotelName");
            options.Select.Add("Description");
    
            // For efficiency, the search call should be asynchronous, so use SearchAsync rather than Search.
            model.resultList = await _searchClient.SearchAsync<Hotel>(model.searchText, options).ConfigureAwait(false);               
    
            // Ensure TempData is stored for the next call.
            TempData["page"] = page;
            TempData["searchfor"] = model.searchText;
        }
        catch
        {
            return View("Error", new ErrorViewModel { RequestId = "1" });
        }
    
        return View("Index", model);
    }
    

    Mirip dengan metode penomoran halaman bernomor, kami menggunakan pengaturan pencarian Lewati dan Ukuran untuk meminta agar hanya data yang kami butuhkan dikembalikan.

  3. Tambahkan tindakan NextAsync ke pengontrol rumah. Perhatikan bagaimana ia mengembalikan daftar, setiap hotel menambahkan dua elemen ke daftar: nama hotel dan deskripsi hotel. Format ini diatur agar sesuai dengan penggunaan fungsi digulirkan dari data yang dikembalikan dalam tampilan.

    public async Task<ActionResult> NextAsync(SearchData model)
    {
        // Set the next page setting, and call the Index(model) action.
        model.paging = "next";
        await Index(model).ConfigureAwait(false);
    
        // Create an empty list.
        var nextHotels = new List<string>();
    
        // Add a hotel name, then description, to the list.
        await foreach (var searchResult in model.resultList.GetResultsAsync())
        {
            nextHotels.Add(searchResult.Document.HotelName);
            nextHotels.Add(searchResult.Document.Description);
        }
    
        // Rather than return a view, return the list of data.
        return new JsonResult(nextHotels);
    }
    
  4. Jika Anda mendapatkan kesalahan sintaks pada List<string>, tambahkan direktif using berikut ke bagian atas file pengontrol.

    using System.Collections.Generic;
    

Mengkompilasi dan menjalankan proyek Anda

Sekarang pilih Mulai Tanpa Penelusuran Kesalahan (atau tekan tombol F5).

  1. Masukkan istilah yang akan memberikan banyak hasil (seperti "kumpulan") lalu uji bilah gulir vertikal. Apakah memicu halaman hasil baru?

    Pengguliran tak terbatas melalui hasil

    Petunjuk / Saran

    Untuk memastikan bahwa bilah gulir muncul di halaman pertama, halaman pertama hasil harus sedikit melebihi tinggi area tempat mereka ditampilkan. Dalam contoh kami .box1 memiliki tinggi 30 piksel, .box2 memiliki tinggi 100 piksel dan margin bawah 24 piksel. Jadi setiap entri menggunakan 154 piksel. Tiga entri akan memakan waktu 3 x 154 = 462 piksel. Untuk memastikan bahwa bilah gulir vertikal muncul, tinggi area tampilan harus diatur kurang dari 462 piksel, bahkan 461 juga berhasil. Masalah ini hanya terjadi pada halaman pertama, setelah itu bilah gulir pasti muncul. Baris yang akan diperbarui adalah: <div id="myDiv" style="width: 800px; height: 450px; overflow-y: scroll;" onscroll="scrolled()">.

  2. Gulir ke bawah hingga ke bagian bawah hasil. Perhatikan bagaimana semua informasi sekarang ada di satu halaman tampilan. Anda dapat menggulir sepanjang jalan kembali ke bagian atas tanpa memicu panggilan server apa pun.

Sistem pengguliran tak terbatas yang lebih canggih mungkin menggunakan roda mouse, atau mekanisme serupa lainnya, untuk memicu pemuatan halaman hasil baru. Kami tidak akan membahas pengguliran tanpa akhir lebih jauh dalam tutorial ini, tetapi fitur ini memiliki daya tarik tersendiri karena dapat mengurangi jumlah klik mouse, dan Anda mungkin ingin menyelidiki opsi lain lebih lanjut.

Kesimpulan

Pertimbangkan hal-hal berikut dari proyek ini:

  • Penomoran halaman bernomor berguna untuk pencarian di mana urutan hasilnya agak sewenang-wenang, yang berarti mungkin ada sesuatu yang menarik bagi pengguna Anda di halaman selanjutnya.
  • Pengguliran tak terbatas berguna ketika urutan hasil sangat penting. Misalnya, jika hasilnya diurutkan pada jarak dari pusat kota tujuan.
  • Penomoran halaman bernomor memungkinkan navigasi yang lebih baik. Misalnya, pengguna dapat mengingat bahwa hasil yang menarik ada di halaman 6, sedangkan tidak ada referensi mudah seperti itu dalam pengguliran tak terbatas.
  • Pengguliran tak terbatas memiliki daya tarik yang mudah, menggulir ke atas dan ke bawah tanpa nomor halaman untuk diklik.
  • Fitur utama dari pengguliran tak terbatas adalah bahwa hasil ditambahkan ke halaman yang ada, tidak mengganti halaman tersebut, yang efisien.
  • Penyimpanan sementara hanya bertahan untuk satu panggilan, dan perlu diatur ulang untuk bertahan dari panggilan tambahan.

Langkah selanjutnya

Penomoran halaman adalah esensial untuk pengalaman pencarian. Dengan pemrosesan halaman yang tercakup dengan baik, langkah selanjutnya adalah lebih mengoptimalkan pengalaman pengguna dengan menambahkan pencarian otomatis.