How to generate custom suggestion list in DHTMLX combo - javascript

The auto-suggestion list provided by the DHTMLX Combo is updated on every keystroke but apparently uses prefix-matching only. How do I change the logic to match anywhere in the option's text.
E.g. in the below fiddle:
https://jsfiddle.net/wra8etjw/2/
I would like the suggestion for "Three" to show up even when I type "ee" in the box. I've read the documentation on custom filtering but neither the custom filtering approach nor the user-defined function got me anywhere.
I am using a DHTMLX Combo box in a rudimentary way. Namely the options are present as a literal in the HTML file served from the server (they are pretty static), so the onDynXLS is never fired (there's no Ajax going on).
My other idea was to capture the current value that the user is typing, save it to some global variable and then provide a user-defined filtering function that would return true on all values in which the current value is present (not just as a prefix). This also failed as apparently the user-defined filtering function is only called on page load, not on every keystroke inside the input text. Moreover, I don't know which even to use to capture key strokes inside the Combo's input text and obtain the current value.
So my questions are:
how to make the list of suggestions show values where the current text exists as a substring anywhere in them, and not just as a prefix?
how to capture keystrokes in the Combo's input text and obtain the current value as the user is typing?

how to make the list of suggestions show values where the current text exists as a substring anywhere in them, and not just as a prefix?
Unfortunately such feature is not available without the modification of the dhtmlxCombo source code
or you should use the server-side filtering mode, so you will be able to use the onDynXLS event solution.
how to capture keystrokes in the Combo's input text and obtain the current value as the user is typing?
You may try to use the "onKeyPressed" event:
https://docs.dhtmlx.com/api__dhtmlxcombo_onkeypressed_event.html

how to make the list of suggestions show values where the current text exists as a substring anywhere in them, and not just as a prefix?
Use enableFilteringMode('between')
how to capture keystrokes in the Combo's input text and obtain the current value as the user is typing?
Easiest way IMO is to attach a handler in the underlying input element the Combo uses.
Updated fiddle here

Related

How to set a value of Angular based JS select/input using CefSharp Offscreen on a third party webpage?

I am struggling with trying set some input on one of third party webpages that has an angular-related fields validation.
When I only set the value attribute by chrome browser or with cefsharp, in both cases, the value is not being set.
I have found a walkaround - to enter one char in required fields to make it ng-touched and then set the js value attribute of it.
In CefSharp, I am creating the KeyEvent and then I am sending it
Then, I am setting the value of the field using CefSharp's EvaluateScriptAsync or ExecuteJavaScriptAsync
When I am doing it manually with browser, it works but
under cefsharp it is not working - it sets the one char in both fields, but then, after changing the value of fields and verifying it in 3 ways does not work:
1)reading the value by EvaluateScriptAsync/ExecuteJavaScriptAsync
The value is being set correctly, but at the end, there is only a first change applied
2)rendering a html by GetSourceAsync() - it renders temporarily the result page with first pre-change only
3)also the same with screenshot functionality of cefsharp
Of course I am unable to use Angular Development tools plugin, because app is in production mode.
What I have also tried:
-using Thread.Sleep with many timespans - did not help
-input.dispatchEvent(new Event('input',{bubbles:true})) - same effect as previous
multiple changes of value pre-set - same effect
multiple setting of a final value - the same
The only working solution I have created was to focus on every required field, then iterate over every string as single char and send it as single key, but it was unefficient and had been refused :(
Angular is made to work with a user, not a bot.
This means it works best when you simulate clicks & moves, rather than directly putting the data where you want.
Where you do
- get input
- set value
Try instead doing
- get input
- focus it
- set value
- blur it
Angular should detect changes better this way.
If it does not work, try directly clicks and keystrokes in the input, instead of settign your value programmatically.

How can I determine if change event occurred from user input?

I have a dynamic form that updates based on user selected values.
One particularly input field (type number) I calculated a default value for and update. But if the user every selects their own value, I want to respect that and not re-calculate the default as they continue filling out the form.
What would be the best way to detect a user input vs my programs input?
I thought about onclick events but want to respect if they use the keyboard to enter. I thought about an on change event, but since my program recalculate the value frequently that won't work.
I found this answer that has ideas for C# fields Determine If Changed Event Occurred from User Input Or Not
I found this answer that talks about using the input event - Detecting input change in jQuery? - which seems like it could work but would fire on every key stroke which seems less than ideal.
What do you think if you set a "keydown" event on the input. And if your script changes the value than you just use "element.value = "Foo"?
Here's an idea that doesn't require hefty code interventions or a large number of event triggers: add a focousout or blur event (whichever fits the needs of your page better) to your input which, when triggered, will take the input's value and compare it to your calculated default. If different, it would mean the user has selected a different value. You could then store the user's value in a hidden element (a simple span will do the trick).
Next time you recalculate your default, you could check if your hidden element has any content and then not replace the value in your input. Or you could check the content of the hidden span containing the user's input before you run the recalculation and avoid it altogether.
That would be a solution that does not change the user interface. If possible, the simplest solution would be adding a checkbox that allows the user to define their own value.

Display Value Differently in Input Field Without Changing the Value?

I have an application with an input field that takes a dollar value. I need to change the way this dollar value displays so that the number is formatted with a $ and commas, like $5,550.00 if the user just enters 5550.
I found a way to do this, but doing so causes all hell to break loose in the code that uses the value from this field--it does a bunch of stuff, including database updates that break if given $5,550.00 instead of 5550.
There is a TON of underlying code and I am not empowered to go fix it all. I need to figure out a way to display this value to the user as $5,550.00 but keep the underlying value as 5550.
Any suggestions?
Use 2 text inputs. A "façade" one that the user sees, and a "real" one which is actually submitted to the server with the form. When the user enters text into the visible input, you can use JavaScript to set whatever corresponding value you want into the "real" (hidden) input. That effectively decouples the displayed value from the submitted one. You can even use a plugin such as jQuery Masked Input to do the front-end number formatting for you.
Make sure to only apply this when JS is enabled in the browser, otherwise your form will be broken with JS disabled.
If you are talking about an HTML form, I would submit the form using javascript.
You could revert the value back to unformatted before submitting the form.

Controlling dynamically added fields' tabbing order with Prototype

I'm creating various input fields dynamically using prototype js. Everything looks nice and cool and the fields are appended properly in the right place.
The only problem is that the field's tabbing order is messed up ...
When inside a textfield pressing tab doesn't switch focus to the field immediately below it.
Instead it gives focus to inputs that existed before the new fields were dynamically added ...
Is there a clean and simple way to reset the field's tabbing order to the regular one, i.e. the one that would switch to the field immediately after in the DOM .
Note : this annoyance occured on Firefox 5.0. I didn't test it on other browsers yet.
You can manually set the tab index. The issue here is that the logical order of fields any given HTML does not always match the visual order of those fields in the browser. So writing a script to automate this may not always work.
According to W3C forms,
Those elements that assign a positive value to [tabindex] are navigated first
... Elements that have identical tabindex values should be navigated in the order they appear in the character stream.
So give all the dynamic fields the same value of 1 and they will be tabbed before any other field (which have an equivalent value of 0) in the order they are added to the document.

What is the best way to modify a specific field in a form?

Specifically what I'd like to do is "alter" one of the fields in the Google Calendar field entry for my own purposes. Namely the location is almost always going to be one of four locations, but the way the Google Calendar is set up it doesn't track frequently entered information, and writing the full address every time (or keeping a notefile w/ the 4 addresses to C&P) is kind of annoying.
Ideal I suppose would be an "extension" or script that would automagically detect that I'm filling out a Google Calendar event entry and change the location field to a drop with the four addresses I frequently use as well as an "other" option.
Another possibility might be some kind of bookmarklet (or set of 4) that fills the location field in.
I don't really know where to start or which method would be better (hell, there might well be a third option that is superior).
PS: If this would be easier/more efficiently done in Firefox or some other browser rather than Chrome that is fine as well.
I'd go with bookmarklets. Here's a potential URL for setting addresses given the current Google Calendar page (the id of the "Where" input is ":1u"):
javascript:document.getElementById(':1u').value='123 Some st.'; void(0);
I'd write bookmarks with URLs similar to the above for each of your 4 addresses and then put them into an easily accessible folder, and use them each time you want to populate that address.
UPDATE:
Since the ID changes, you can get it by the class name. However, if the class changes or the number of inputs before the Where field changes, you'll have to update your links:
javascript:document.getElementsByClassName('textinput')[1].value='123 Some st.'; void(0);
UPDATE 2:
Apparently Google doesn't consider the current value of the textbox when a Calendar item is saved. I fixed this by manually firing the 'change' event after the value of the textbox is updated. The following currently works in Firefox:
javascript:var a=document.getElementsByClassName('textinput')[1];a.value='123 Some st.';var e=document.createEvent("HTMLEvents");e.initEvent('change',true,true);a.dispatchEvent(e);void(0);

Categories