I have an Angular 9 application, where I am using select to populate the cities belong to a country. Countries are also listed using a normal html select, not using any third party components like material. Currently I am facing some slowness with rendering the select for cities when I have around 5700 cities against a country. We are populating cities from an API endpoint, when the country value changes. The issue is not present when there are fewer cities against a country.
When I looked for a solution across the forums, many are suggesting to use a autocomplete search box for cities.In our case, we should have to stick with the select as the customer wants it that way.
Would like to hear your thoughts/solution/approaches for this
Thanks
Virtual scroll can resolve your issue. Because in case of big lists, like yours. CDK Virtual scroll should be used. Please refer to Cdk virtual-scroll inside mat-select for mat-option for how to implement it.
Related
I'm trying to use react-select as more of an autocomplete search component.
For a select component with <Select isSearchable={true}/> react-select performs search autocomplete suggestions under the hood. It suggests selectable options as the user types and displays only those in the dropdown menu.
I'm wondering if it's possible to get a list of those suggested options as the input changes.
It doesn't seem to be the case that you can. The closest access you have is to customize the filter logic, see documentation. Even this built in function only gets passed one option at a time, so in order to know all options that pass the filter, you'd need to aggregate the result elsewhere.
For me this would be needlessly complex for the problem at hand.
Filtering options, even if done twice, is typically not an expensive computation. The simplest solution would be to implement your own onChange that tracks the value of the <Select /> then filters the options down, independent of the third party library.
I've been looking in to a few grids that are currently built that I could just make use of however none that I have found so far provide the same functionality as an SPGridView in terms of filtering.
The closest I've managed to find is JSGrid which allows you to search each individual column.
What I'd like to do is to display all unique values for a specific column in the filtering option below the normal Ascending and descending much like the list view functionality you currently get in a document library or list.
Many Thanks
Truez
I have a web form which has the user input the values of certain characteristics, however some of the characteristics have up to 45000 values.
The selects were working earlier, albeit with a slight amount of lag when populating the dropdown and trying to scroll through it fast, but now it does not populate at all and the web form hangs.
Is there a way to efficiently contain this many values into a dropdown? Also which is the best library for searchable comboboxes?
I looked at this implementation as it has a "load on open" feature which I thought might be beneficial, but it did not seem to work and is no longer actively developed.
http://john-oc.github.io/
Thanks
Perhaps it would be better to use an autocomplete feature instead of a select menu in this case. A user can type in the first few characters, causing a request to start filtering results based on their input.
Here are a couple of really good autocomplete plugins:
https://github.com/devbridge/jQuery-Autocomplete
Roll your own:
http://www.webreference.com/programming/javascript/rg16/index.html
I agree with Todd, I think you might want some solution that has autocomplete to hide too many results. I'd even go a step further and suggest bootstrap DataTables: https://datatables.net/manual/styling/bootstrap
You can make searchable tables with this, with the key advantage being that it paginates results, so you don't see it all at once.
I'm a big fan of https://github.com/angular-ui/ui-select. You can have it make a request based on the current text input, and then populate the dropdown.
Since the question is already answered, please let me just contribute here.
You can use the typeaheads from angularStrap to achieve this. Beyond the easy manipulation of data, you can even use to make async calls using data provider.
I have a table with many entries (4000 - 5000) with 5 columns. These are paginated and only about 20 rows are shown at a time although all data exists at the client side.
I want the user to filter different column by categories (and if possible using some wildcards), this user input will be taken using something like Form input. Note that i can perform all the operations using Javascript code, however i am unable to understand what kind of UI elements do i need to use for this purpose (I am not from a web dev. background but learning the tricks). I tried using libraries such as selectize, researched some Jquery UI plugins. In fact i also found a spreadsheet specific library (slickgrid.js) but it is slightly beyond my skill to implement.
So in essence is there a simple way to get user input to select categories in a column(s) with all data in client array ? I would love to reach a stage where i may be able to group column categories and use them to give autocomplete/ dropdown menus etc. However i am just trying to figure out a reliable way to translate user input to string to be used in code.
I am developing a search form which displays a number of categories and sub-categories. The client has requested that I do not use cascading dropdowns but to display radiobuttons instead so that the user can see the top level categories at a glance.
I had a bit of a look around for any javascript plugins that might give me a head start and save me from having to write all of the code from scratch but didnt come up with too much.
Can anyone suggest a good plugin that will allow me to display a radio button list in a hierarchical collapsible tree structure?
Cheers,
Tristan
Solution
I ended up using this plugin and adapting it to my own needs -> http://code.google.com/p/checkboxtree/
There is a great jQuery plugin called jsTree.
http://www.jstree.com/
I personalize it for my needs as well.