Following the example page of select2.
There is a minimum input length of 1. When I type AA, get the results, then delete AA, I still get results for A.
It looks like select2 ignores the minimumInputLength settings when deleting the search term and shows results even though I have deleted the search term.
Is there any event triggered when the search term is changed? Any other solution?
That is not an issue of minimum length. What you actually see is the default behaviour of select2 caching. When you type in your first text, select2 will fetch the options, but it will keep them in DOM, when you delete the text, so you will see them after you delete the text and open options. To disable this you need to add cache: false option
This situation have a relationship with the parameter "tag". Please set tags: false, in your select2.
Related
I have a mat-select dropdown with more than 20 values. I have to select a value from the available list. The first 5 values are visible when the dropdown is clicked. After that, the values in the dropdown are not visible and unable to click.
cy.get('app-screen').find('#paper-code').click());
cy.contains('mat-option', 'AL019').should('be.visible').click();
Since the above code failed, updated the code as below.
cy.contains('mat-option', 'AL019').click();
This worked. But, will it get failed anytime later?
Another question, is how to get the selected option for mat-select?
It could fail later but it won't if you set the force option to true and avoid having to wait for an actionable state.
cy.contains('mat-option', 'AL019').click({ force:true });
If it does fail in the future, you want to know about it because there's a regression in the app.
Don't {force:true} unless you really really need to, because it will stop your test catching such regressions.
To test the value is selected may be as simple as
cy.get('app-screen').find('#paper-code').should('contain', 'AL019)
I have two select2 containers, which work together side-by-side. Both are ajax based selects, and the selected value of one of them, determines the results in the other.
My problem is the following: when I select the first of the two select boxes, and open up the second one, it is prepopulated with the correct search results. Yet, when I change the first select, and then reopen the second one, for a split-second, while the ajax request is sent for the new data from the second select option, the results that were shown previously are still visible and selectable.
For a concrete example, imagine the following two select boxes: one is for occupation, and the other contains names of persons. The intended use case would be, is to select an occupation in the first one, and then the second one will only list the persons with that occupation. If I select, for example doctor as the occupation, and then list the second one with all the doctors I get the correct result. But if I then reselect the first one, and change it to engineer, and re-open the second one, I will get the list of doctors for a split-second, before the ajax manages the load my engineers. I can even select a doctor, as an engineer, if I am quick enough.
Is there a way to disable this behaviour? IE: whenever I click on an ajax related select2, show me an empty list, or the "Searching" string, while the request to the server is made, and an answer is returned?
Select2 "caches" options retrieved by ajax inside the options of the original tag. To disable cache as you say, remove all those options just before the new option gets selected.
In practice, removing options before or after does not make a difference in your problem, but if you were to have this same problem in a single select (not combining two as you mention), you should do this with the event 'select2:selecting', instead of 'select2:select' event (Select2 events)
$('#select-occupation').select2({
...,
ajax: {
...
}
})
.on('select2:selecting', function(event){
console.log('actual value: ' + $(event.target).val());
$('#select-people').find('option').remove();
});
I am using select-2 for a list of states. I think its great and love the search input field it provides. I'm wondering though, is it possible to include another input so someone can manually enter information ~ I am hoping to add an "Other" or "International" field to this drop down so instead of including all the states / provinces / territories of the world I provide a field they can manually enter if the territiry if it's not included in the drop down list.
Is an input in a drop down even possible? I would like to try and stick with Select2 as I like the added features it provides.
You can add items manually to the select2 dropdown using the "tagging" function. See the link for more information: https://select2.org/tagging
My program flow requires that I first set the value of a select option in the Viewmodel and then I load the available options into the Viewmodel. This causes problems, typically the first available option will be seen in the selection list after this, while the selected option value stays at the specified value.
I was hoping that setting the new "valueAllowUnset" would help, but instead my page becomes unresponsive when using it.
Therefore I currently set the original value again after loading the options. Strangely, this only works when I set the value, set a different value and then set the value again, e.g.
self.data()[field](orgValue);
self.data()[field]({});
self.data()[field](orgValue);
(I store values for multiple selection lists in the self.data observable and access them with the property index "field".)
I tried to strip this down to a simple JSFiddle (http://jsfiddle.net/timvdh/HN6DE/), but the behavior does not show there, although the example pretty much resembles my actual application. However, I am using about 30 select lists there.
So I was hoping, that someone can make an educated guess about what goes wrong in my application, I am hoping that the fact that I have to set the original value three times maybe gives a clue.
EDIT: This fiddle demonstrates, that setting the selected option before and after filling the options list does work with "valueAllowUnset": http://jsfiddle.net/timvdh/HT5Tp/
I am using JQuery Mobile with knockout.js and that caused the problem (sorry I did not even think about JQM being the problem in the first place). I am now setting the option before filling the list and after filling the list I call
$("#selectmenuID").selectmenu("refresh");
to display the option.
The hanging browser was not caused by knockout, there are additional subscriptions to the selectmenus in my app. "valueAllowUnset" changed the behavior of the selectmenus and triggered loops caused by problems in my code.
SmartGWT has this property for a TreeGrid object:
employeeTreeGrid.setSelectionAppearance(SelectionAppearance.CHECKBOX);
This by default 'prepends' every nodes (including root) with checkbox.
(Just making myself clear.)
Also, I am aware of this similar solved question:
GWT tree with checkbox:How to get all checked tree items?
However, I do not seek this kind of solution..
What I'm looking for is a more efficient way, where I don't have to loop through 1000 items.
Is there any way to do this, if possible, using the widget I am using now?
If not, is there any other way, using other widget?
Thank you very much!
I think as you use SelectionAppearance.CHECKBOX you tell to the grid that the selected records are marked by the checkbox field value. So every time you check one you select a record.
You can get the set of selected records by either getSelection() method or getSelectedRecords(boolean) because of deprecation of the previuous one.
You can have a look at the code of this example of the smartgwt showcase.