I need to edit items before the last one in a Primefaces autocomplete field:
<p:autoComplete multiple="true" ... />
It's possible to delete the item before with the mouse, but not to change it or go back with cursor left. If I edit the "Tags" field of Stackoverflow questions, it's for example possible to click on an item, which is transformed to editable text and an autocompletion is visible for inner tags too. Any idea of how to achieve this with p:autocomplete? Even the http://jqueryui.com/autocomplete seems not sufficient, as it has no autocompletion for inner items. I still need PF 'itemSelect' and 'itemUnselect' events. There is a similar question at primefaces 4: Multiple autocomplete add an element in middle of eneterd items where the conclusion is, that it's currently not possible (but with hard JS extensions). I might have to open a PF enhancement request or are there other JS solutions? A solution could be to create many dynamic autocompletes with multiple="false".
You could use PrimeFaces autocomplete component with multiple input.
Try it typing for example Home, Bootstrap, Casablanca...
Related
I'm trying to change the listbox option[shown in image below] to JPY ¥ using javascript
however there are a lot of issues that come here and I just don't know how to go about it...
A thing to notice is, on changing to JPY the right hand side gift-total value also changes from 0.00 to 0
this is the external showcase of the listbox
and these are the listbox options(the id changes every refresh to the webpage)
If you open the listbox dropdown and try to pick an option
aria-activedescendant and aria-owns attributes dynamically get added into the div listbox html element
which are using the id of the listbox options
^Source for definition images:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
What I have tried:
Now I have tried changing innerHTML of the element
however apparently that only changed the visual aspect, as currency never changed to japanese yen on the next page that would you know charge you some amount
any way on how I should go about to directly change its value using javascript without resorting to clicks and all
Spent a few hours on stackoverflow and google but only one similar question which no one has answered unfortunately
TLDR;
most likely tldr; change selected value of aria listbox using javascript
except this thing doesn't use aria-selected which is causing me major pain to understand how to make an autofill for it.
Link to try for yourself:-
https://examplegroup.chatango.com
=> You would have to sign up/register to view the svg (triple bars/rectangles) at bottom right corner.
=> Clicking on "Extended Features" and then clicking on "Purchase an original account" will result in reaching my starting line from which you can replicate and assist further in figuring a solution to it.
I would like to implement a dropdown component that shows the selected options upon expanding.
Here is what I have so far, but it tokenizes the selected options, which I don't want. I want them to look similar to a single selection dropdown where they are just shaded/highlighted, but there can be multiple selected.
<Dropdown
text="Filter"
icon="filter"
className="icon"
fluid multiple selection labeled button
options={filterOptions}
/>
As you noticed, Semantic doesn't (currently) support a whole lot of customization regarding multi-select. So, you have two basic options. First, you could use the subcomponents implement the details of dropdown yourself (including all the events that get fired) and only rely on Semantic for the styling. If you choose this route, you might as well write your own.
Alternatively, you can hack together a solution using some Semantic's built-ins.
To do this, you need to change two main behaviors:
1st - you need hide the tags. You can do this by modifying the renderLabel method on the dropdown. Returning null from that method will prevent the tags from being rendered.
2nd - you need to unhide the selected options in the dropdown. There's no built-in way to do this, but you can fake it by inserting a new duplicate option for every option selected. Make sure you attach an onClick to allow deselecting of objects.
Here's a working example: https://stackblitz.com/edit/so-49442592
There's a lot of quirks to it, so feel free to ask questions!
https://angular-ui.github.io/bootstrap/ with the Static arrays example in the Typeahead section...
If I wanted to do something like being able to select multiple states, one after the other, how would I add that into the Typeahead code? Also, is there anyway that when I click the input - it shows all the selections possible with a scroll bar?
Edit: I really like this one however it doesn't allow for multi-select: http://ghiden.github.io/angucomplete-alt/
Here is what I ended up using: https://github.com/tamtakoe/oi.multiselect
try to use chosen:
chosen at github
Chosen works very well with angular and css frameworks, because chosen only hide your original multiselect component, without affect DOM parts.
I have a very complicated Javascript/JQuery Leaflet map. There is supposed to be a Leaflet control with a dropdown select box. The select box pulls it's content via AJAX. It pulls the content correctly and the generated HTML is fine and can be seen. If I use the keyboard to highlight the select menu, I can use the arrow keys to change the value. However, I can't click on the select menu and see the drop down box. The click is being captured fine(checked with JQuery .click()).
I can't share the specific code because I'm not sure what's wrong and I can't share the whole thing because of security issues. So, my question is a little more general:
What kinds of errors/bugs should I be looking for if a select dropdown menu is not showing on click? What are various things I can check to see what is wrong?
Thanks.
Nevermind - known issue with Leaflet. Custom Control not working
I am looking for a plug-in or way to duplicate the default combo box from visual studio in C#, where you can select from a list or type in a new value. I have found several plugins to "search" or act as an autocomplete for a select element, but I want the user to be able to see all options at any time through the drop down, and add their own through the text bar (or select an option then edit it, to either make a new option or permanently alter the selected option).
Does anyone know such a plugin?
I found this the other day, seems like it would meet your requirements: http://harvesthq.github.com/chosen/
(NOTE: I haven't used it yet so I can't comment on how well it works)