How to adapt an autocomplete/select field to work with server-side filtering and pagination

This page summarizes the projects mentioned and recommended in the original post on dev.to

CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • paginated-autocomplete

    Follow up to dev.to article

    If you need to compare anything with your work, you can access the source files through a GitHub repository here.

  • CodeRabbit

    CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

    CodeRabbit logo
  • vuetify

    🐉 Vue Component Framework

    The technical implementation will be demonstrated with Vue, my preferred framework for everyday work, combined with Vuetify, a very robust and highly customizable component framework commonly used in the Vue ecosystem. Note that concepts used here can be applied using other combinations of popular JavaScript technologies.

  • core

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (by vuejs)

    The technical implementation will be demonstrated with Vue, my preferred framework for everyday work, combined with Vuetify, a very robust and highly customizable component framework commonly used in the Vue ecosystem. Note that concepts used here can be applied using other combinations of popular JavaScript technologies.

  • vite

    Next generation frontend tooling. It's fast!

    To begin, we will create a new blank project. You can skip this paragraph if you’re looking to add the solution to an existing project. Using Node Package Manager (NPM), we will create the project with the command: npm create vue@latest. The default settings are fine for our purposes, but if you prefer, you can change them. I enabled ESLint and Prettier options. There are other ways to initiate a Vue project, but I prefer this one because it uses Vite as the development server by default.

  • lodash

    A modern JavaScript utility library delivering modularity, performance, & extras.

    If you try the search now and pay attention to the network tab in developer tools, you will notice that a new request is fired off with each keystroke. While our current dataset is small and loads quickly, this behavior is not suitable for real-world applications. Larger datasets can lead to slow loading times, and with multiple users performing searches simultaneously, the server could become overloaded. Fortunately, we have a solution in the Lodash library, which contains various useful JavaScript utilities. One of them is debouncing, which allows us to delay function calls by leaving us some time to call the same function again. That way, only the latest call within a specified time period will be triggered. A commonly used delay for this kind of functionality is 500 milliseconds. We can install Lodash by running the command npm install lodash. In the import, we only reference the part that we need instead of taking the whole library.

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Show HN: Personal URL Shortener Web App (Via Hono and Deno KV)

    1 project | news.ycombinator.com | 7 Nov 2024
  • Angular 19 - Streamlining Data Retrieval with Experimental Resource and rxResource APIs

    1 project | dev.to | 5 Nov 2024
  • Zephyr3d – WebGL/WebGPU rendering engine v0.6.1 relased

    1 project | news.ycombinator.com | 5 Nov 2024
  • J'ai essayé de passer à Vue.js depuis React.js

    2 projects | dev.to | 4 Nov 2024
  • 7 Advanced TypeScript Concepts Every Developer Should Know

    1 project | dev.to | 3 Nov 2024