I have an input field in bootstrap 3 and I want to make it autocomplete with values from some local data, so I chose bootstrap-typeahead. The problem is that when the user chooses some value, I want to change the source of typeahead so that this value is no longer included in the available options. I have simplified a jsfiddle because the only thing that I can't do is change the source.
The following code doesn't work.
autocomplete.on('typeahead:closed', function( i, j) {
//change source
autocomplete.data('typeahead').source = altdata.ttAdapter();
});
Here: http://jsfiddle.net/gtzoumis/rdC3Z/4/
There are some answers for previous versions but none of them work.
the answer was to destroy the object and create it again...
thanks to this link
autocomplete.typeahead('destroy');
$('.autocomplete').typeahead(null, {
name: "autocomplete",
displayKey: 'name',
source: altrepos.ttAdapter()
});
Related
I would like to reset/clear my MUI Autocomplete component.
I have two of them with model like { label: string, value: string } and if first will change its value then I would like to clear the second one since second will get options by selected value in first one.
Moreover - I am using react-hook-form with setValue. I use as value in this method { label: '', value: '' } but it causes warning that in my new sort of options there is no such option to select (this is minor issue I think) but it does not reset second Autocomplete input but partially. I still see X to clear value. I used null as value in setValue but it does not cleat input as well.
What I want to achieve is - selecting some option on first input I would like to reset second input like clicking on X does. Is it possible ?
Cheers!
I found what caused the issue I describe above. It was because Autocomplete in my codebase was declared with clearOnBlur={false} props. It prevented to clear value of my Autocomplete when I was doing setValue(autocompleteFieldName, null) via react-hook-form. I hope it helps someone with the same strange issue since I was not interacting with input at all to invoke onBlur event. Cheers!
i use jodit in my website and wonder, how the content of an existing jodit editor can be updated within a function.
first i do....
$( document ).ready(function() {
var editor_adressblock = new Jodit('#adressblock', {
fullsize: false
});
});
and the editor is correctly created.
I have a function, which can be executed by the user and then should load content (via json-request) and then put the content into the existing jodit textarea.
Here is my try (for this example i have simplified the function) :
function takeover_adressblock(kunde_id, kunden_adresse_id) {
// get data by ajax.... not shown in this example
var data_by_ajax="test";
editor_adressblock.value=data_by_ajax; // this fails....
}
Means, i don't know how i can send data to the existing jodit texteditor...
I am a jquery beginner, so please don't be too hard ;-)
Best regards
Daniel
Per the documentation you seem to have the right format, so it would help to see the code for the ajax request you're making in case the issue is there.
Otherwise, I would suggest initializing the editor without jQuery in case it's a reference or scoping issue:
const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
I need to implement Autocomplete feature in ag grid cell on the table. Is ag provides any options for that. I am just seeing select with options. But my need is to edit the cell and while start typing the values has to display below based the character.
Like you I could not find this feature. I decided to write an Angular component for this purpose and share it.
It has the ability to filter by starting to type, as well as clicking the selection by mouse. Keyboard arrow up and down navigation is also included.
It's a simple component and should be quite straightforward to edit to your likings, or take the code and implement in JS or a different framework if you are not using Angular. I am having some unfortunate cosmetic issues (primarily on the last column of the grid), which I hopefully can solve soon and then will update the repository.
https://github.com/superman-lopez/ag-grid-auto-complete
Edit:
Since my original post, a new project has started and this is not limited to Angular projects:
https://github.com/avallete/ag-grid-autocomplete-editor
You can use a jQuery autocomplete as part of the cell editor. You have to do it in the afterGuiAttached function of the custom editor so it won't run until after your input has been created.
// function to act as a class
function YourCustomEditor () {}
// gets called once before the renderer is used
YourCustomEditor.prototype.init = function(params) {
this.eInput = document.createElement('input');
this.eInput.setAttribute('class', 'inputClass');
this.eInput.setAttribute('type', 'text');
}
};
YourCustomEditor.prototype.afterGuiAttached = function() {
$('.inputClass').autocomplete({
source: function(request, response) {
// Do your autocomplete filtering here
},
datatype: 'json',
select: function(event, ui) {
// Do Stuff on select
}
});
this.eInput.focus();
};
When using a data aggregation on sap.m.Select, the first entry is always selected. Here's a link to the SDK's preview.
Example code from my app
new sap.m.Select("id-names", {
width: '100%',
}).bindAggregation("items", "data>/trip/names", new sap.ui.core.Item({
text: "{data>Name}"
}));
There is a parameter called selectedKey on the constructor to change this to another index. What I want is the select to be blank, because I want to force my users to make a choice, not blandly accept the first entry in the list.
I could force an blank entry in my aggregation data>/trip/names but that would pollute my list.
Is there a better way to achieve this?
Since the OpenUI5 version 1.34, you can set the forceSelection property to false.
The forceSelection property indicates whether the selection is restricted to one of the items in the list. The default value is true (which means, if the selection is not set, the first item in the dropdown list is selected).
When to set it to false?
If you do not want a default item to be pre selected.
Additional information
https://github.com/SAP/openui5/commit/b2191fd50e2115f8f9d2db7604a75fb50c57591f
Currently, no. There seems to be no better way.
There is a ticket for that on GitHub.
It's also my opinion to avoid messing with the dataset and much liked the idea of adding an additional item aggregate. However my improvement on this is to use a formatter on the control itself so it is clearly visible and executed at the right time.
I make use of a formatter with fully qualified controller to get the control as 'this' parameter. In the formatter function I add a ListItem, as proposed by #Victor S
In XML view
<Select forceSelection="false" selectedKey="{model>/key}" items="{path: 'model>/Items'}" icon="{path: '', formatter: 'mynamespace.Utils.addDeselectOption'}">
In the Utils controller:
addDeselectOption: function() {
var that = this;
this.getBinding("items").attachDataReceived(function(){
that.insertItem(new sap.ui.core.ListItem({text: '', key: undefined}), 0);
});
}
Works form me in UI5 1.52
Even though this solution is not great, I managed to get the empty field stick by adding both, the forceSelection=false property, and also in the controller's onInit function (I used the Select element):
var codeField = this.getView().byId("codeField");
setTimeout(function() {
codeField.insertItem(new sap.ui.core.ListItem({text: '', key: undefined}), 0);
}, 1000);
If the forceSelection=false is left out, the field will load either too early or too late to the drop down, which will cause the wrong selection to be visible. Hope it helps someone.
You can also extend the control and build you own select with e.g. an additional parameter add empty choice...I am actually also thinking about that...
I made a combobox using sap.m library:
var oSelection = new sap.m.ComboBox({
name: <name>,
id: <id>,
items: {
<items here>
})
},
});
Now, how do I make this field kind of read only, so when I tap it on mobile, it wouldn't bring up the mobile's keyboard, but it would bring up the selection options?
I've tried to use editable: false, but it disables the selection together with keyboard.
Thank you.
From what I could find out there's no method that allows such behaviour.
One option, that I personally would not advice, is to access the HTML DOM and disable the input field that composes the sap.m.Combobox component.
Keep in mind that if the development SAPUI5 changes the inner workings of the Combobox component your code could be broken if you update the SAPUI5 libraries.
This being said, to use this option you could do something like:
oSelection.onAfterRendering = function() {
if (sap.m.ComboBox.prototype.onAfterRendering) {
sap.m.ComboBox.prototype.onAfterRendering.apply(this);
}
document.getElementById("<id>-inner").disabled=true;
}
replace the < id>-inner by the correct id given to your component.
This was tested using version 1.22.8 of SAPUI5 development toolkit.
Use sap.m.Select instead of sap.m.ComboBox.
Select does not provide the ability to edit the field content.
In many instances the Select control can directly replace a ComboBox without any other changes to the properties or the items aggregation!