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
Related
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
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
I have an Angular model ng-model="car" I am trying to create a dropdown list, and would like the list items to be populated from objects in the model. I am trying to do this all in the HTML (since it is Angular).
Any thoughts?
If you want a form input: http://angular-ui.github.com/#/directives-select2
If you want a dropmenu: http://angular-ui.github.com/bootstrap/#/dropdownToggle
Checkout the dropmenu source code too to get an idea of how to go about doing it if you rather code up your own solution.
Essentially AngularJS makes it so easy that the ONLY thing you really need to do is toggle the visibility of a DOM element and use some fancy css.
Checkout this example of using pure AngularJS + AngularUI (when necessary) alongside Bootstrap's CSS to create dropmenus (and other widgets) http://plnkr.co/edit/gist:4464334?p=preview
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/
i have a selectbox with Country code values, they have a "short" label (2 letters) and a "long" label (full name).
when not selected i want the "short" label to appear, but when clicked and the full selection appears to chose from the "long" labels should appear in the dropdown.
is this even possible with html? or do i need to render a textfield and draw the selction over it using js/css?
is there maybe an advanced component available in any framework?
It's not possible with pure HTML. This may call for a Javascript based SELECT replacement.
Check out these resources:
11 jQuery Plugins to Enhance HTML Dropdowns
(Wanted to post examples for each JQuery, Prototype and Mootools based plugins to avoid Frameworkism, but can't find any quickly right now)
It might be simpler to wire up a textbox with a js drop down that has the short label and populates with the full name. There are a ton of them out there that already do most of this, it would just be a couple of tweaks for the full effect.