In my form text input bar, the json returned by the autocomplete widget will be, [{id = 1,lable="lable1"},......]
[{id = 1,label="label1"},{id = 2, label="label2"},......]
and I want the input box display value to be "label" which works as default, but I want to the input value to be "id" when I submit the form..
Many thanks!
I usually keep a <input type='hidden'> right next to the autocomplete input, and then on the select event of the complete I populate that with the ID:
$("#autocomplete-input").autocomplete({
minLength: 2,
select: function (event, ui) {
$("#autocomplete-input-id").val(ui.item.id);
}
});
Related
I have had a select control where I could select from user names. Now I want to convert that select into combo box so I can give the user ability to enter text as well. The values populated in the combo box are in text property as {FirstName}, {LastName}. I do not want to use additional text as it shows at end of the row wih lot of space in between. My issue with Combo box is :
Values get populated but how do I filter? There is already some logic that is written on change method. I want to do custom filtering on the values. For example: If I write "P" it should show all the values that have P in the text (First name and last name). Where to write filter function? Also I found custom filtering code in demokit, I want to use it - but when I use it in inti method under delegate, I get error - this.get....setfilterfunction().. is not a function
View.xml
<ComboBox items= "{path:'items>/name'}" id="A"
selectedKey="{item>/Header/Name}" change="nameSelected">
<core:ListItem key="{order>NameID}" text="{order>LastName} ,{order>FirstName}"/>
</ComboBox>
Controller.js
_initializeData: function () {
var name = this.getView().byId("A");
name.addEventDelegate({
onAfterRendering: function() {
this.getView().byId("A").setFilterFunction(function(sTerm, oItem) {
return oItem.getText().match(new RegExp(sTerm, "i")) ||
oItem.getKey().match(new RegExp(sTerm, "i"));
});
}
},
nameSelected: function () {
......some logic processing..
}
You have to bind this in your function. I guess.
Can you access this.getView().byId("A") , when you put a break point in the onAfterRendering part ?
Try this solution: You are not working in the right scope.
_initializeData: function () {
var name = this.getView().byId("A");
name.addEventDelegate({
onAfterRendering: this.setFilter.bind(this) });
},
setFilter: function() {
this.getView().byId("A").setFilterFunction(function(sTerm, oItem) {
return oItem.getText().match(new RegExp(sTerm, "i")) ||
oItem.getKey().match(new RegExp(sTerm, "i"));
});
},
Does anyone know if it's possible to change the increment value of the number "spinner" in a Kendo UI grid field? I know it can be done in a stand-along numbericTextBox but I haven't been able to find any information about values inside a grid.
Ideally I'd like it so when I increment or decrement using the up and down arrows, it does so by .5 instead of 1.
I know this is late but for future reference, you can use the editor field for manipulating your numeric textbox.
{ 'field': 'count', title: 'Count', editor: numericEditor }
In your js file, you initialize the numeric textbox
function numericEditor(container, options) {
$('<input type="number" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
min: 1,
step: .5,
});
}
Here's a Dojo for demo
I am wondering if there is any way one could place a date input control in a toolbar similar to the one used for date input on a form?
Yes, it's possible, but it's quirky.
You will have to define the input field as a toolbar button:
{ type: 'html', id: 'roles', html: '<input id="id_role">' },
and in the toolbar's onRefresh() event you will have to cast the input to the desired w2filed:
onRefresh: function(event) {
if(event.target == 'roles'){
// w2field in toolbar must be initialized during refresh
// see: https://github.com/vitmalina/w2ui/issues/886
event.onComplete = function(ev){
$("#id_role").w2field('list', { items: roles });
};
}
},
In my example I'm inserting a drop down list, but you can adjust it to your needs.
Please see https://github.com/vitmalina/w2ui/issues/886 for an "official" reply.
A potentially simple issue with jQuery UI autocomplete is stumping me. My source is
var ac = [
{
label: "One Thing",
value: "One-Thing"
},
{
label: "Two Thing",
value: "Two-Thing"
},
]
I am invoking the widget with
$(function() {
$( "#search" ).autocomplete({
source: PK.getAutocompleteSource(),
focus: function( event, ui ) {
$("#search").val(ui.item.label);
return false;
},
select: function( event, ui ) {
$("#search").val(ui.item.label);
PK.render(ui.item.value);
}
});
});
All works fine. When I type in the #search input field, the matching label shows up in the dropdown, and when I select the correct search is performed. The widget even shows the label in the #search input field as I select different items in the dropdown using the arrow keys (or the mouse). Except, soon as I hit enter, the widget fills the #search input field with the value instead of the label. So the field shows One-Thing instead of One Thing.
How can I correct this? Surely what I am expecting is the more reasonable behavior, no?
if you want the label to be your value, just have the source be
var ac = ["One Thing", "Two Thing"]
alternatively, the select method of autocompletes default action is to put the value object (if specified) as the value of your input. you could also put event.preventDefault() in the select function and it will put the label as the value (as you have)
select: function( event, ui ) {
event.preventDefault();
$("#search").val(ui.item.label);
PK.render(ui.item.value);
}
If you want your label to be your value in the text box onFocus AND onSelect use this code:
select: function(event, ui) {
$('#hiddenid').val(ui.item.value);
event.preventDefault();
$("#search").val(ui.item.label); },
focus: function(event, ui) {
event.preventDefault();
$("#search").val(ui.item.label);}
I was missing the onFocus event (only setting the onSelect event). Thus, the value continued to show in the text input.
I was still haveing a problem with arrow keys showing the values. So I actually found it better to assign both the value and label to the label, and then put the value on a 3rd property of the data. For example let's put it on id.
var ac = [
{
label: "One Thing",
value: "One Thing",
id: "One-Thing",
},
{
label: "Two Thing",
value: "Two Thing",
id: "Two-Thing"
},
]
Then when you use the select event, you can get id from ui:
select: function( event, ui ) {
PK.render(ui.item.id);
}
I wonder if somebody would be kind enough to help me with my query?
I have the following code that works great, however I would like to post one of the selected results to a DIV rather than a form field.
I've tried 101 things myself but the solution is beyond me.
I also thought that making the form field hidden and copying the contents into the DIV with Javascript would be a solution until I realized that I did not know how to do that either...
$( "#search" ).catcomplete({
delay: 0,
source: 'complete_client.php',
minLength: 2,
select: function( event, ui ) {
$( "#id" ).val( ui.item.id );
$( "#title" ).val( ui.item.value );
$( "#spec" ).val( ui.item.spec );
document.forms["main_search"].submit();
}
});
I would, where possible like the id to remain in the form field with the title and the spec to populate a DIV.
Should it not be possible/too much work, would automatically copying the form contents into a DIV be possible/easier with Javascript?
Many thanks in advance
Chris
$( "#search" ).catcomplete({
delay: 0,
source: 'complete_client.php',
minLength: 2,
select: function( event, ui ) {
// Put selected item's text into div
$('#divid').text(ui.item.value);
/* Whatever other code you want here */
}
});