multiple select angular-materialize - javascript

I'm using angular-materialize to generate a multiple select :
http://krescruz.github.io/angular-materialize/
I'm using ng-model to retrieve the selected items, all this works, however I tried to add a search box in order to filter what I need.
my problem is I search for the first time and check the value, but then when I make an other search (that doesn't lead to the previously selected item) it is deleted and I'm only left with the last selected items.
So my questions are :
1/ is there a way to conserve all the selected items even with multiple search?
2/ is it possible to always have the dropdown "active" meaning I won't have to click in order to have the list ? (if that helps the previous problem)
Thank you

Related

Semantic UI multiple select dropdown - close event

I am trying to get the values selected in a multiple select dropdown - just once, because I am populating a cascading dropdown depending on the selected values in the original dropdown, and don't want to get data every time the user selects one value from the multiple select. Ideally I want to get the values after closing down the dropdown by clicking out of the dropdown or on the down arrow on the dropdown.
Does anyone know if there is an event for this? After searching online, I tried onClose, but that apparently is for React only, and also is not in the documentation (https://semantic-ui.com/modules/dropdown.html).
I have been looking for an answer since posting the question, and yes, I found a solution.
Using onHide, the values can be captured just once.
$('#ddlMultiple').dropdown(
{
onHide : function () {
//get the selected values here
}
}
);

How to filter data for dropdown options based on previous selected?

I will try to explain shortly. I have this:
I am using AntDesign library with React, and these are not regular inputs, but Autocomplete dropdowns, when i focus on one of them it gives me a list of options to choose. So first i have to choose first dropdown value and after that i will get options in next one to choose, then i choose second and after that i get options for third and so on. So it is something like a chain, you must select all previous dropdowns to be able to get options and select current.
This is what i get from backend.
The normal thing would be that i get values for first dropdown and after i select value i call endpoint again which will return options for second one and so on. But no, i get all possible combination of values in one array, and now i have to filter that one big array each time i select value in one of the dropdowns, to get values for next one, so for the SCOPE for instance, i have to filter array depending on 3 selected previous values and so on for the others.
Last two fields are not important for this problem.
So, i need help how to filter these values in the easiest way. And to use Form.Item and Autocomplete from AntDesign.

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

Multy-filter page with transitions - Isotope & Quicksand JS problems

(note: edited since I've just realized the question are somehow correlated, at least in my mind!)
I want to create a multi-filter page in which the result will be animated...
I'm trying with 2 different plugin (quicksand and Isotope) and with both solution I'm having problems...
---ISOTOPE--- (original)
With Isotope I need to filter data based on active class, or based on IDs of filters, which I've already stored in JS, does anyone know how can I do that?
I set up a page with 2 different filter like 'color' (red, blue, orange...) and 'type' (square, round...)
I already have a Javascript that assign class active to the 2 filtering lu based on selection, if all color are selected shift the 'active' class to 'all', and more than one sub-filter can be activated. And this also save the list of the id of the active li items in a string for color filter and another string for shape filter
I also already set up the page like the combination filter Isotope demo at this link: http://isotope.metafizzy.co/demos/combination-filters.html and it is working fine but doesn't allow to select more than one sub-filter at the same time.
I saw the demo at this link http://fiddle.jshell.net/desandro/JB45z/ with filtering combination, but it is based on radio button that I'd like to avoid.
I'm not sure if what I'm trying to do is easy or not... is like, how to tell to Isotope to filter based on the sub-filter that have active class or based on the sum of the li with the ID saved in my two string?
Thanks for any help, as you can easily understand I'm not skilled in js at all and english is not my first language!
--- QUICKSAND --- (edited)
I've just realized that I didn't explain why I stored the IDs of the selected items in the js string. And this is also about the different js question.
I was trying to set up the same system with Quicksand instead of Isotope.
But since quicksand need to have a starting li and a destination li to display the animation I set up the js to pass an array to a different temporary php page that use the array to display a destination li.
All until here is working fine but I'm not able to get back the li data in the original page to let Quicksand perform the animation. The last part of my js appear to have problems that I'm not able to fix (too many days trying with no success), the last part of the js is:
$.post( 'destination_li_filtered.php', {
colorString,
shapeString,
$('#ids').attr('val')
},
function(data) { // should contains the resulting data from the request (?)
$('.list').quicksand( $(data).find('li'),
{ adjustHeight: 'auto' },
function() {
callbackCode();
}
);
e.preventDefault();
});
the external page destination-li-filtered is displaying the results but the original page is not able to take back the data...
Obviously I need to set op the page with isotope or quicksand, not both.
but I'm also wondering witch is the best plugin to display 100's of results with about 20 filters (without considering the combinations). And of course, which is the easiest to use!
You should see the radio button and the change in view as separate things.
It's a common misconception that you should store all your state in the DOM (ie. which checkbox is checked). The DOM is a view, you don't keep state in a view.
You should have a state that lives in your JavaScript.
Like:
var state = "all_selected"; // green, red, blue
Then, when you check the radio button, it will set the appropriate state and update the list (show/hide elements based on state).
This allows you to make any control you want, be it a radio button, a checkbox or something completely custom.

Autofocus blank space in dropbox without creating an empty option?

I have a select that has dynamically created option option[0] always ends up being autofocused making my onchange not work if I want to choose the first option.
The index of the options matter so creating a " " option won't work.
Any ideas?
edit: The user creates an object. When the user saves the object, it creates a new option in the select tag. The user selects something from the select tag to go back to that object.
The autofocus is always on option[0] until they selected something else even if they created a new object/option so if they wanted to pick the first thing, but was on the second or third the user would have to click on another option first then click on the one they want.
What I want is that it doesn't focus on any of the options so that they could click on option[0] from the beginning regardless of whether they've selected anything from the dropdown.
Seems like a lot of work to workaround this issue, instead of changing one of your requirements. You say that the index corresponds to an index into an array of objects. Why can't you have the first option blank or "Select...", and then simply subtract one for your lookup into the array?
Or, have the values correspond to the array index, or use custom data attributes to store the array indexes? Seems like any of these would be easier than trying to force a consistent behavior for an unsupported functionality across multiple browsers.
A Select box always has one of its options selected (unless it doesn't have any options). You might need to use a different event (onclick, perhaps) and test the value to see if it has changed.
You can add a default empty selected option with:
<option selected="selected" disabled="disabled" hidden="hidden" value=""></option>
The select is empty by default, with the void option not selectable in the options list.

Categories