Is there any component in polymer 3.0 which is similar to select2(library) multi-select.
I tried multiple packages but its not similar to select2.The goal is to view all selected items in boxes enter image description here
Best bet would be to just get select2 working inside Poylmer 3, and then making your own component.
From searching around there is no "silver bullet" component that you can plug and play that is as polished as select2. There are a few components on webcomponents.org that might be close at least. ( But no where near what select2 offers )
some to check out:
https://www.webcomponents.org/element/Neovici/paper-autocomplete-chips
https://www.webcomponents.org/element/mastercodekw/mcd-multi-select
( Not quite select2 style but depending on your use case, might be an option )
https://www.webcomponents.org/element/PolymerEl/paper-tags
( Not very polished )
I hope this helps
Related
I need to have an input field with an arrow on the right so when I press on the arrow I have the bahaviour of a select tag ( a dropdown list of options). I was wondering if it's possible to do this in HTML/Angular 6... I found the solution of a datalist but it's not actually the result I'm looking for because with this solution if I enter some value in the input, which is not present in the datalist, and then click on the arrow anything display because datalist filters what to display depending on the input value.
Hope it's clear enough.
Taking account that you can use a library or an UI framework, I suggest you the following options:
Angular Material Select Component
The google's UI framework to Angular applications.
Pros: Acessbility and responsivity are concerns of the framework, easy integration with Angular
Cons: The values of select can't be filtered
https://material.angular.io/components/select/overview
Angular Material Autocomplete component
Another component of google's UI framework. It's not a pure select, but it can be adapted as a combobox with filtering.
Pros: Acessbility and responsivity are concerns of the framework, easy integration with Angular
Cons: As it's not a pure select component, so maybe you would have to adapt it.
https://material.angular.io/components/autocomplete/overview
I am using Angular 2 material UI for my application, and I trying to make a form in which 2 fields has a combobox but while research about that I came to conclusion that the combobox doesn't exist for material UI. So my question, is there any work around for this issue, as it is important for me to use the combobox in my application?
I was able to use the Autocomplete control to achieve this. It has a defined list of items to pick from and you can also enter text... https://material.angular.io/components/autocomplete/overview
You could use the select component of Material, which is basically the same deal as a combo box.
https://material.angular.io/components/component/select
is there any ready widget like that?
If not, can I combine the dijit filteringSelect with dojox multichecked?
if not, is it easy to create one of my own or has any one started doing this? it's so necessary for my project.
There is no widget like that as far as I know (the multichecked widget itself is not even a standard widget, since it's a part from DojoX).
About your question of combining both. I don't think that will be easy, because the dijit/form/FilteringSelect does not use a <select> as widget and I don't think they're made to be ran together.
And the answer to your last question: it all depends on what functionality you exactly need. A dijit/form/FilteringSelect only allows you to select 1 value (it's a textbox with a dropdown in fact, and a textbox can only have 1 value).
If you want to create a variant with radio buttons, then that is possible, but it is not an easy job. The multichecked is working with a simple DOM node, however, the dijit/form/FilteringSelect offers a lot more things like autocomplete, stores, ... . To make your widget work, you need to listen to all these events and adapt yuur radio buttons to it.
I made a simple example that is only displaying radio buttons for each item in the filtering select, the code can be seen at JSFiddle. However, it does not react to changes, that's a part that you will have to implement.
I have this problem, in a form I have a list of customers that could be more than 300 and, for me, it isn't very simple find over there because I should scroll all results for find a single row!
On the old technology I had a button that opened a pop up where I should research which customer I should select and than I used a javascript for recording the selection on the first form, but It could be a good solution with new technology!
How can I resolve this doubt? What is the best solution for big <select> tag?
You basically want an autocomplete dropdown list. This does not exist in the standard JSF component set and it is also not exactly trivial to implement with JavaScript/jQuery on top of the standard JSF component set because the available values have to be present in the server side's state. You also basically want a dropdown list which is represented by a <div><input><ul><li> instead of a <select><option> because a normal <select> doesn't allow the enduser to type text in. The standard JSF component set does not have a component which renders the desired HTML markup. You'd basically need to create a custom JSF component.
There are 3rd party JSF component libraries which already offer a fullworthy JSF autocomplete dropdown list. It would be easier to use either of them instead of reinventing the wheel by a custom JSF component. Take your pick:
PrimeFaces - the <p:autoComplete> component
RichFaces - the <rich:autocomplete> component
OpenFaces - the <o:suggestionField> component
ICEfaces - the <ice:selectInputText> component
you can try jquery ajax autocomplete
Refer to:
http://docs.jquery.com/Plugins/Autocomplete
http://jqueryui.com/demos/autocomplete/
Yes, the jQuery autocomplete plugin is the best solution for you while you have a large number of items.
By the way, imagine that you would like to select an item with specific letters. While you are using drop down lists, you can point to your wanted items by typing their names from the first letter of each one. But using jQuery autocomplete, you can search a string or a group of letters in everywhere. it does not matter if are your inserted letters located at the first of your item names or in other places.
As ShantanuD said, you can find this plugin in http://jqueryui.com/demos/autocomplete/
We are porting our MFC based client to Dojo. Is there any widget similar to listbox control. At present I am using DataGrid, but that seems heavy and overkill for our purposes. Alternatively what is best widget to replace listbox.
Update: I have already looked at dijit.form.multiselect, and I dont think that meets my requirement. MFC Listbox typically looks like this. I dont see (or rather dont know) how to replicate this with multiselect. It is possible that DataGrid is best fit for the control.
If you use dojo 1.7, take a look at the new DGrid.
For an example looking like yours, go to the tests page and pickup the Selector.html example.
Here are some options depending on which part of the ListBox you want to create:
dijit.Dialog to create a basic dialog box.
dijit.form.FilteringSelect to create a drop-down with your options (single select only).
You could also use radio buttons or checkboxes for your options depending on whether multiple selections are allowed.