I am looking for something p-autocomplete with result having checkboxes for every row and can allow multiple rows from the result.
Please guide me with the best possible solution or an idea with I can proceed.
Cheers!!
I would recommend using multiselect that have all the feature that you want to implement in auto-complete with a checkbox.
Writing custom functionality in a component that would be riskier than using that already built-in component that has these functionalities. This will help get less error-prone components. Writing custom checkboxes in autocomplete need lots of implementation apart from functional like accessibility, arrow keys actions, etc. So go with multi-select.
So for auto-complete in multi-select component use can use the filter property.
multiselect
Related
I use a multiple-choice grid in a google form. How can I dieactivated all checkboxes in this form?
I started to do some tests with the Google Forms configurations and settings.
Sadly it would not be possible to remove the checkboxes as you suggest. Mainly due to the way the Forms interface works or is presented, for example:
Due to the rows and columns functionality. It might be a better idea to introduce a drop down menu if you still want to provide multiple choices, for example:
I can see an option in the future to change the style or design of the multiple choices. You can send feedback for something similar in the future here:
https://www.googlecloudcommunity.com/gc/Feature-Ideas/cmp-p/grouphub:workspace-ideas-group
Or
Click on the help icon (at the bottom of the form) and select the option to report a problem to send a suggestion or feedback.
References
https://support.google.com/docs/answer/7322334
I can't find anywhere a simple multi-select using css, this is how select looks when attr multiple added
I need to build on top of it more functionality and use it as an angular component, I'm building an angular library and I don't want it to depend on any other plugin
why you don't want to use any plugins! it simplifies the issue instead of writing too many lines,
I advise to use (chosen plugin) and here is an example of it
chosen plugin (multiple select)
I am creating a greenfield application in Angular.
I was wondering what to do with the userinput.
I will create 10+ date inputs, 20 text inputs, 8 dropdowns, 30 buttons, 10+ currency input etc., all with validation.
With my background as a .NET developer I am used to have a lot of html for each control (html control, lots of bootstrap, validation line), duplicated throughout all the html.
Now in Angular there are directives.
Should I create a directive for each type of user input?
And with 'should I' I mean in a pragmatic way (because it's very handy) and/or a architectual way (because it is better architectual).
The second reason I ask is because I find the directives syntax one of the more difficult parts to learn.
In my opinion you should not create any directive for inputs / selects.
Html code for inputs and selects is to short and easy, so directive will not help you at all. Instead of use on inputs build in angular directives Lets look:
<input ng-model=""
ng-disable=""
ng-pattern="for email format"
for select you can use also ng-options
for validation purpose you ca use something like that:
ng-class="{'has-error': !joinForm.password.$valid && !joinForm.password.$pristine }"
So I think custom directives will only complicate your work
There are a lot of things in angular for inputs and so on.
You may have to add directives for custom validation, you can find sample on the net.
Check this sample http://weblogs.asp.net/dwahlin/building-a-custom-angularjs-unique-value-directive
Note that this sample is not the cleanest one.
This one is better : http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/
However i think you should start with implementing the 1st one before going for the 2nd if you want, to do it in a step by step way. And yes directives syntax and usage of ngModelController are not so easy.
Other sample : in order to reduce the html to type and ensure that i have all my fields with the same presentation (label on the left, error messages, info tooltip on the right,...). I create a directive for this. It's a matter of how far do you want to go, and how long do you have, to do this.
Most of all : before reinventing the wheel, check on the net, if it isn't supported natively by angular, there is a tons of things already done and shared online.
I would tend to agree with Przemek that in general it would over complicate things. With the exception that you might build a re-useable form that you want to pre-build for use in multiple places. I have worked on an Angular app recently which had multiple edit panels and we essentially built custom directives for common components that were then put together to make individual forms/edit panels. But not single elements.
I have a form for lawyers where they need to be able to select which states they are licensed in.
So, they need a clean way to be able to select a few states from all 50 states.
What I'm not sure is, how to handle this in HTML. Is there some possible way to have a drop down of checkboxes or something similar?
I'm using ASP.NET MVC. I'm also curious how the model binding will look on the return for something like this.
Thanks,
Simpatico
This jQuery plugin might help.
Binding should work like for regular select with multiple selected items allowed.
You cannot put checkboxes in a dropdown unfortunately, the closest you could get is something like
<select multiple="multiple">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
but I don't think that would be too useful for 50 states.
You can consider following the approach widely adopted in desktop applications.
Put two select windows together on the form - the one for all available options, the other one for the ones the user has selected. Also put two buttons, preferably between those two windows - "Add item" and "Remove item".
Now the user will have a good overview of the current selection. A little more work but very good from the usability and smooth user experience point of view.
Styling form elements using css can be problematic since every browser render tag in different way (just like when safari render checkbox).
Okay lets ignore safari for a while, skinning input and button are rather easy but how to completely skin select, checkbox, radio, etc.
See this pages:
Checkbox skinning
Select skinning
Radio skinning
I've heard some JS framework such as EXTJS or MooTools can do that, but i don't want a large scale framework solution, just independent JS and we can modify the skin as we like, please no JQuery solution, since i don't use it.
Any idea to do that without using some specific framework?
If you want complete control, then you generally have to replace the browser controls completely and fake them with other elements, stylesheets and scripting.
If you don't want to use a framework, then it basically comes down to DIY.
That said, the whole concept have a couple of problems.
Trying to get the controls to behave how the user expects (given input from clicking, double clicking, triple clicking, right clicking, dragging, arrow keys, the control key, etc, etc, etc) is hard.
The controls might not look as the user expects.
Personally, I'd generally try to let form controls stick to the system defaults and not try to deviate from them. Give users what they expect.
Today there are quite many javascript solutions which allow a wide range of customization for form elements styling. A quick google came up with a few nice ones:
Perhaps the best known is the Bootstrap CSS framework:
https://getbootstrap.com/docs/4.0/components/forms
https://www.psd2html.com/js-custom-forms (jQuery plugin)
https://purecss.io/forms
https://github.com/select2/select2
https://github.com/harvesthq/chosen
Checkboxes/Radios:
https://codepen.io/vsync/pen/aBOOZB
https://codepen.io/vsync/pen/wKkuz
https://codepen.io/manabox/pen/raQmpL
Today you can find many kinds of form element styling on Codepen.com
Old answer (from May 16 '09):
yes, it is quite easy.
you can use niceforms, which is independet script for making
nice looking forms, then you can modify the graphics images /
CSS as your wish.
The idea is, coding something that looks the same with same
funcionality but different design, then you need to "give it
life" with some javascript magic :)
then, you have to have ilsteners all over the place, to check
what the user clicked, than you need to reflect that same value
to the pre-hidden form element the corresponds to the "fake"
one. means, to manipulate it. then when you send the form, the
right values are places via JS.