extract combo box value when typed in

[fryParticipant]

I have defined:
this.jqx_combo.on(‘change’, function (event){
// “this” inside this fn is the dom elt with class arg_val
// this.children[1].value returns the orig value string but not a typed in value string.
debugger
let the_val
let sel_item = $(event.target).jqxComboBox(“getSelectedItem”)
if (sel_item) { //sel_item is null if you type in a single char to the combo box, the change willbe called but sel_item will be null due to bug in jqx
the_val = sel_item.value
}
This change method is called when theuser selected a new item from the combo box menu.
(good)
But this method is also called when the the user types in the first char
but not succeeding chars (inconsistent behavior. We really need an ondata
event just like HTML for input tags)
The method is also called when the user types tab or return
(good)
But if the user has typed in chars,
$(event.target).jqxComboBox(“getSelectedItem”).value
does not get the typed in chars,
in fact it errors because
$(event.target).jqxComboBox(“getSelectedItem”) returns undefined.
How to I get the chars in the type in that the user has typed in to the input box?

[HristoParticipant]

Hello fry,

Could you clarify what you want to achieve if the suggested example does not help you?
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[fryParticipant]

There’s a bug in your fiddle and it may be related to the bug I’m having.
to replicate the bug in your fiddle:
– In chrome, browse the url in your “example”.
– click right, click on Inspect, then click console
to show the dev tools console.
– now back in the fiddle,
click in the typein region of the combo box
– hit the delete key until you’ve erased all the characters.
– type the char “a”.
so far so good. console prints out something reasonble
– type the the the char “b”
You get
(index):86 Uncaught TypeError: Cannot read property ‘label’ of null
at HTMLDivElement.<anonymous> (http://fiddle.jshell.net/5fwqg3b7/show/:86:22)
at HTMLDivElement.dispatch (http://code.jquery.com/jquery-1.9.1.js:3074:9)
at HTMLDivElement.elemData.handle (http://code.jquery.com/jquery-1.9.1.js:2750:28)
at Object.trigger (http://code.jquery.com/jquery-1.9.1.js:2986:12)
at HTMLDivElement.<anonymous> (http://code.jquery.com/jquery-1.9.1.js:3677:17)
at Function.each (http://code.jquery.com/jquery-1.9.1.js:648:23)
at init.each (http://code.jquery.com/jquery-1.9.1.js:270:17)
at init.trigger (http://code.jquery.com/jquery-1.9.1.js:3676:15)
at b.(anonymous function)._raiseEvent (https://jqwidgets.com/public/jqwidgets/jqx-all.js:58:56546)
at HTMLDivElement.<anonymous> (https://jqwidgets.com/public/jqwidgets/jqx-all.js:58:8691)
(anonymous) @ (index):86
dispatch @ jquery-1.9.1.js:3074
elemData.handle @ jquery-1.9.1.js:2750
trigger @ jquery-1.9.1.js:2986
(anonymous) @ jquery-1.9.1.js:3677
each @ jquery-1.9.1.js:648
each @ jquery-1.9.1.js:270
trigger @ jquery-1.9.1.js:3676
_raiseEvent @ jqx-all.js:58
(anonymous) @ jqx-all.js:58
dispatch @ jquery-1.9.1.js:3074
elemData.handle @ jquery-1.9.1.js:2750
trigger @ jquery-1.9.1.js:2986
(anonymous) @ jquery-1.9.1.js:3677
each @ jquery-1.9.1.js:648
each @ jquery-1.9.1.js:270
trigger @ jquery-1.9.1.js:3676
_raiseEvent @ jqx-all.js:120
selectIndex @ jqx-all.js:120
_search @ jqx-all.js:58
(anonymous) @ jqx-all.js:58
setTimeout (async)
(anonymous) @ jqx-all.js:58
dispatch @ jquery-1.9.1.js:3074
elemData.handle @ jquery-1.9.1.js:2750

I think this is because
in your change code,
you have, effectively
event.args.item.label
and event.args.item evals to null
so null.label gives the error.

NOW in my case, in my change method,
if I bring up my dialog and type in
“a” then hit return to get the change method to fire,
and I do it ints body
event.args.item.value
(to attempt to get the text that the user typed in ie “a”
I get an error because event.args.item evals to null.

Just as another attempt, in my change method
called under the same circumstances,
event.target.value
evals to undefined (but you didn’t imply that would work
so this is probably OK.

It is good that you told me about the keyup method.
This will definitely help me.

I am running this code inside of the the ELECTRON framework.
I can imagine that Electron is screwing something up here
as I’m having trouble with HMTL5 datalist combo boxes
as well as the awesomplete combo box. jqxComboBox is
the closest of the bunch to working so at the very least,
you’re better than the rest!

I’m running a jqx widgets that’s about 1 year old.
(not sure how to tell what version I’m running.)
Should this matter?

I appreciate your attention!

[HristoParticipant]

Hello fry,

The error that you mentioned is happening because there is no such item.
You could prevent this by check for this or use autoComplete: true.
Please, take a look at this example: https://jseditor.io/?key=babee50c2d0f11e8b3a100224d6bfcd5

Also, we recommend using the latest version of jQWidgets: http://www.jqwidgets.com/download/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[fryParticipant]

By taking y9ur suggestion of getting the latest jqwidgets release 5.6.0,
I now have most of the functionality I need.
Here’s my method:
this.jqx_combo.on(‘change’, function (event){
let the_val
let sel_item = $(event.target).jqxComboBox(“getSelectedItem”)
if (sel_item) { //sel_item is null if you type in a single char to the combo box, the change willbe called but sel_item will be null due to bug in jqx
the_val = sel_item.value
}
else { //happens when user types in then hits return, tab or clicks outside the widget
the_val = this.children[1].value
}
let new_width = Root.jsdb.literal.string.compute_width(the_val,
12, //elt.style[“font-size”],
65)
$(this).jqxComboBox({width: new_width + “px”}) // dropDownWidth: new_width + “px” }) // ,
})
First, inside this method
event.args, as in the example of the url you give above,
https://jseditor.io/?key=babee50c2d0f11e8b3a100224d6bfcd5
evals to undefined.
But $(event.target).jqxComboBox(“getSelectedItem”)
works, however, that ONLY works when I choose a menu item from the combo box.
If I type in some text and hit return (or tab),
the on change method is called but
$(event.target).jqxComboBox(“getSelectedItem”)
returns null.
HOWEVER in detective work, I found that
the_val = this.children[1].value
grabs the string out of the type in.
This is inelegant, but your method of event.args.item.value
does not work since event.args is undefined.
Maybe you have a better method of doing this.

My remaining problem is only in setting the width of the type in.
(this).jqxComboBox({width: new_width + “px”})
works when the type-in is wider than the widest dropdown list item,
but will not set the width to less than the widest item in the dropdown list.
Since I am expecting to have very wide items in the dropdown, but
often will want to have quite short items displayed,
(whether chosen from the dropdown or typed in)
this results in the displayed widget being unnecessarily wide
when not being operated on. Is there some way I can
get rid of this “minimum width”?
thanks!

[HristoParticipant]

Hello fry,

I would like to mention that it is possible to set width as an integer number.
Also, I would like to ask you provide us your examples in https://www.jseditor.io/ or https://fiddle.jshell.net/ for better analyze.
Unfortunately, there is no such feature as a “minimum width”. You could calculate it based on all records that you have.
You could use dropDownWidth property of the jqxComboBox to determinate different size of the drop-down listbox (also dropDownHeight).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[fryParticipant]

Good to know I don’t have to turn numbers into strings with +”px”,
one of the many design flaws of CSS that you’ve fixed.

I’ve solved my problem of getting the min-width down
by setting it explicitly on the HTML input tag.

I’ve got pretty much what I need now.
My concluison is combo boxes don’t work in Electron without
a week’s worth of work.

Its difficult to extract my code into one small working example
but the basics are:

let val_elt = make_dom_elt(“div”,
{class:”arg_val identifier_combo_box”,
type: “text”,
“margin-left”: “0px”,
value: (arg_val? arg_val : this.value),
//style: “width:” + width + “px;”, //does nothing. jqxcombobox overrules
margin: “0px”,
padding: “0px”,
“font-size”: “14px”,
//oninput: “Root.jsdb.literal.string.oninput(event)”,//does nothing for th jqx widget
ondragenter:”enter_drop_target(event)”,
ondragleave:”leave_drop_target(event)”})
this.jqx_combo = $(val_elt).jqxComboBox({height: ’16px’, source: this.choices,
selectedIndex: 0, width: width + 25 + “px”,
autoComplete: true
})
this.jqx_combo.on(‘change’, function (event){
// “this” inside this fn is the dom elt with class arg_val
// this.children[1].value returns the orig value string but not a typed in value string.
debugger
let the_val
let the_input_elt = this.children[1]
the_input_elt.style[“min-width”] = “40px”
let sel_item = $(event.target).jqxComboBox(“getSelectedItem”)
if (sel_item) { //sel_item is null if you type in a single char to the combo box, the change willbe called but sel_item will be null due to bug in jqx
the_val = sel_item.value
}
else { //happens when user types in then hits return, tab or clicks outside the widget
the_val = the_input_elt.value
}
let new_width = Root.jsdb.literal.string.compute_width(the_val,
14, //elt.style[“font-size”],
35)
$(this).jqxComboBox({width: new_width}) // dropDownWidth: new_width + “px” }) // ,
$(this).jqxComboBox({dropDownWidth: 200})
})

this.jqx_combo.on(‘keyup’, function (event){
// “this” inside this fn is the jqx combo widget.
//debugger
//let the_input_elt = this.children[1]
let the_val = event.target.value
let new_width = Root.jsdb.literal.string.compute_width(the_val,
14, //elt.style[“font-size”],
35)
$(this).jqxComboBox({width: new_width})
$(this).jqxComboBox({dropDownWidth: 200})
})

In the keyup method,
event.target.value
gives me the string in the typein box.
But in the change method it doesn’t.
This is the big problem.

In order to get the min-width to below the widest elt in the dropdown,
I had to do:
let the_input_elt = this.children[1]
the_input_elt.style[“min-width”] = “40px”

Thanks for your help!

[HristoParticipant]

Hello fry,

Our widgets set own classes on the parent that they used.
If you try to override it and set your customizations over the jqxComboBox we cannot guarantee the result.
Also, I would like to ask you add your code in ‘code block’ tag or while you type the code in your post use one “`” to start and a second one for the end of the source code. Thus way the post will be more readable.
If you want to add some style settings I would like to suggest you use the recommended classes of the concrete widget.
Please, take a look at this article:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxcombobox/jquery-combobox-styling-and-appearance.htm?search=comb

The change event is triggered when you change selected item, not on each one keypress.
I suggested you a solution for this case. Please, take a look at this example:
https://jseditor.io/?key=babee50c2d0f11e8b3a100224d6bfcd5

If you want to get the specific width you could wrap the ComboBox in parent which you could control the width and also you could set width: "100%" of the ComboBox.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts