I have a requirement where I need the autocomplete feature of textfield & allow multiple selection. I searched the net for resources [like wicket stuff and this ] but could not find any.
My Question -
1) Does wicket provide any component of this kind?
2) What work around can I have to accomplish this?
3) Can we use jquery in wicket?
I am having legacy code using wicket 1.4.18 & its hard to upgrade to the latest wicket due to time constraints.
Appreciate all your inputs.
Had the exact same problem as you a while back....At that point we had a custom component that did exactly what you need (multi-seclect-autocomplete). The component used a lot of Javascript and sadly did not perform the same on all browsers.
After some research I found Select2-Wicket witch is the wicket implementation of Select2 component.This really solved all the problems...it is genius.
The only problem you have regarding this component is that it does not have 1.4 wicket support and you will have to either port it to 1.4 or make the switch at least to 1.5(that is what I did).
You could implement a multichoice in a ModalWindow with a TextField and a ListView with the values filtered by the TextField input and selectable by Checkboxes.
ModalWindow and all other components are in Wicket 1.4. You have custom component which you can fully control. You can make it work and look like you want. You are not depending on an external component (i mean Select2).
The advantage of Select2 is the much better UX. However control is limited. It's hard to change it's appearance, it might not fit into your App. Not all js events from the orginal component are exposed and you might evolve into some complex scenario where you will encounter the limits of (Wicket)Select2. It is ok for basic tasks.
Related
I'm looking to build something pretty much identical to this snippet in react without jquery. This snippet only works with jquery and jquery does not work well with react:
https://bootsnipp.com/snippets/2q81r
The only examples I can find anywhere are option select examples.
When I try the above snippet it doesn't even show the dropdown without jquery.
Seems like something you could just make yourself and not have to rely on further dependencies.
Have whether it's open or not tied to a local component state variable, and have each input controlled and updating a local state value.
THere re a ton of great UI libraries if you wanna search around for something that might fit your needs - Semantic UI, Material UI, etc.
Or you can follow along a great tutorial - this one seems decent:
https://blog.logrocket.com/building-a-custom-dropdown-menu-component-for-react-e94f02ced4a1/
Hi I had come across a question how to achieve suggestions in the input field while typing for example (in browser url bar while we typing first 3 to 4 letters it give suggestion if the url is correct we go with it else with single delete key press remove the suggested content). This need to be done with input field. Is this scenario is possible? Thanks.
There's a big range of possibilities here.
If the contents of the list are static or easily generated via code, you can use a native HTML <datalist> element.
If you are wanting autocomplete in the form using the user's previously-provided data, you can just enable via the <input autocomplete> attribute
If you're wanting far more customization, it's going to have to be some JavaScript that does the dirty work for you. Stack Overflow is not a good forum for getting library suggestions, but you should survey what's available in your current development stack.
This is absolutely achievable, have a look at - typehead.js
It's a javascript project for doing exactly what you're asking, I believe it's compatible with boostrap too.
Autocomplete suggestions are a very common Web Component. If you are using jQuery, you might want to try this component published by Materialize. If you are using, say, Polymer, you might want to try paper-autocomplete. If you are using vanilla javascript, you could try typeahead, or something like this autocomplete library. Most other modern web frameworks will have some alternative. I wouldn't really recommend making one from scratch.
JIRA has a nice search tool built into the issue tracker -- date-pickers, multi-select label pickers, number filters (min/max), and the like. For the label filter specifically, I'm wondering if this is a feature that Atlassian home-rolled; or did they use a plug-and-play framework that I too can add to my site; or something in between? I realize there's some back-end stuff that needs to happen in order to populate the list, but the UI element itself looks really slick.
The image below, from jira.atlassian.com, shows the label filter I'm interested in.
I tried pulling apart the source on the page, but I only found things that appear to be unrelated: AUI (Atlassian's UI standards?) and AJS (a low-level jQuery-esque library?).
I think that this plugin is the one you need. But you still will need to do the backend magic to ensure it works.
http://harvesthq.github.io/chosen/
We're doing a project in Angular.js and the Mockups we're getting from our UX person heavily use interactive popovers / callouts.
The problem is that I can't seem to map these on to angular concepts in a clean way. Conceptually they require their own templates, controllers, and they need to be created and destroyed all over the page. Overlapping elements without changing the layout.
Bootstrap modals aren't seen as an acceptable alternative. The founders are really keen on having interactive dialogs that point at specific elements on the page.
Is there something that can accomplish this? Or do you have any tips?
I would implement a directive or set of directives that you can show on focus or blur or mouseover of other elements. Depending on your implementation, you might be able to get away with just one directive that opens onFocus or onBLur. Angular 1.2 supports ng-focus, ng-mouseover, and ng-blur which you can leverage to do something like this.
<div class="check-thing">
<button class="checkmark" ng-mouseenter="showModal = true" ng-mouseleave="showModal = false"></button>
<modal ng-show="showModal" model="modal-model"></modal>
</div>
Then just have the form in the directive populate a two-way bound modal-model, or fire a callback when the user clicks okay that the controller waits for. It might even be better to just make the whole checker thing a directive and use them in a repeat.
Beware, none of this will be very friendly on a tablet or phone as they don't readily support hovers.
Have you looked at the AngularUI Bootstrap modals? (http://angular-ui.github.io/bootstrap/#/modal) They fit very well into AngularJS and can really be styled into almost any appearance you want. Passing data in and getting data out is very easy. Most UX people don't seem to understand how the web works (mine doesn't seem to anyway) and these have been a real savior for me and my team.
I know this is an older post but since an answer was never selected I would like to point out a possible solution that I had come across recently.
The Angular UI BS Popover allows you to have it align with the element you are targeting, which can be click, hoover, and focus.
For content you have the choice between text, HTML formatted string and template. Based on the question, the template is likely the one that would be used to allow the content to be dynamic and include interaction.
You can find more information and a demo on how it works at: https://angular-ui.github.io/bootstrap/
I need to implement a Checkbox tree and I came across this component called jstree. It is a jQuery component and unfortunately I have no experience with Jquery. I followed the documentation and I have implemented my checkbox tree. The problem is with finding the selected checkboxes upon some event,say form submit. The API says,.get_checked ( context ), .get_unchecked ( context ).
But I am not sure on how to use this. In the sense, whichobj.getChecked()? And what is the context here? Can someone care to throw some light on this by giving an example ?
Also,is there any other non-jquery components for this?
Thanks!!
Re: any non-jquery components for this--
Yes, use the YUI Treeview with checkboxes
YUI is industrial strength (it's used on the Yahoo products), well documented, open source and a supportive community.