Multi-line, multi-data source auto complete textarea - javascript

Is there a jquery plugin that supports multi-line ,multi-data source autocomplete textarea?
By that I mean every line in the textarea is bound to a different data source which is specific only for that line. For example, on the first line of textarea the user types in a country name,he is then presented with a list of countries, makes his choice and then presses Enter key. He is now on the second line of the textarea and this time he will type in the city name, another list comes up and he goes through the same process until he completes the form.
This is my attempt to simplify data input in the application Im building because it has lots of dropdown and input boxes.
Thanks!

Related

How do I input a value in dropdown with input type text using JS?

I'm trying to do a automated flow using JS in Power automate, for form filling.
I'm struggling with the dropdowns that are on the website. Inspecting the elements, there is no values in the dropdown available, only when selecting them manually. I tried to run the following line
document.getElementById('type').value="EORI";
document.querySelectorAll('input[Id="type"]')[0].value="EORI";
When running this, it does insert the text EORI in the dropdown, but it isn't being stored, meaning that if I perform an action like save, the field is still marked as empty? Is there some way to add the value without having to change the website structure?
First image is without anything selected in the dropdown and secound image is when EORI is choosen in the dropdown. "EORI" is only the value, the name in the dropdown is "EORI number", not sure if it matters.

Script to fill a value automatically in the webpage input box

My job is to order diagnostic tests for patients and I need to write 6-7 characters value for each diagnostic test. I have 24 different values and I need to fill it many thousands of times. I am thinking to create 24 different scripts with Tampermonkey to speed up my job by clicking on the script box.
So the thing is that I need to fill this
box. Here are the input id and everything of that box in the console. Then I type the value manually, I get popup list which updates every time I type one character (same principle as google or youtube search box), here is the popup list after I type a value and if I want that diagnostic test, I need to click on it from the popup list, I cannot just simply click enter. So this is the code I have to fill the box by a value:
document.body.appendChild(element)
element.addEventListener('click', function(){
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '15002 '
})
The script fills the value, but the popup list doesn't appear and I need to click on the box, delete one character and write it again to get a list and then to choose a diagnostic test from it. Still, time-consuming.
I wonder, is it possible to make a script to add automatically a diagnostic test from the list like this example? If no, is it somehow possible to make that popup list would appear and I won't need to click on the box, delete one character and write it again? At least, could I make that the box is clicked after a value has been filled? I tried this code but doesn't work: document.querySelector("input#generic_test_order_search.ui-autocomplete-input").click()
Please help me to make it as automatic as possible, which would save me hundreds of hours in the long-term.
1 - As for the second part of the question. Picture 4.
It is pretty simple to make an auto-fill for the dropping parametres, we just might need the html-code of the elements.
For example,
document.getElementsByTagName('input')[0].click(); clicks the first input checkbox from the first input
document.getElementsByTagName('select')[0].selectedIndex = 1; selects the second value from the first select
document.getElementsByTagName('button')[0].click();clicks the first button
To make it more precise you might use class at first, at then tag:
document.getElementsByClassName('testClassDependingOnExistingClasses')[0].getElementsByTagName('button')[0].click(); for example.
Anything you do manually on a page like that can be done automatically with JS.
2 - As for the first part of the question. Picture 2.
Here is the part of the answer.
How to trigger arrow down press in js?
Maybe this code might help, but not enough information, since no data on html-code of the dropped elements.
document.getElementById('generic_test_order_search').clildren[0].click();

How to make a slack dialog with more than 5 inputs ? Node Slack API

I'm currently handling with a problem. I need to make like a form to create something like this:
So, I'm trying to make a form with a Slack's Dialog but my problem is that only supports 5 inputs, this is my current process:
Is there another way to input text or dropdowns and return that kind of format ? or how can I add more inputs (5+) to a dialog ?
No, you can not have more than 5 inputs in your Slack Dialog. Its the current upper hard limit.
Dialogs are the best way on Slack for structured text input. But you could also use text input from a slash command, e.g. /command "first input" "second input"
You can also create drop downs with message menus
To solve your problem of needing to query more than 5 inputs from the user in Slack I think you have two options:
A. Use multiple Dialogs, e.g. you appear to have 9 field, so you
could first open a Dialog for the first 5 elements and then for the
last 4 elements.
B. You mix Dialogs (for text input) with message menus for drop down
input and/or a slash command, e.g. use a Dialog for the text input and main options. Then show the result as Slack message and allow the user to change the remaining options wit message menu.
Update July 2017
You can now use up to 10 elements per Dialog. See here for details.
Currently the limit is 10 for each dialog. In case you need to retain the state of the previous dialog, or want to get the previous dialog input values in the next dialog submit processors, you can use state field in the dialog attachment. The state field take values as text and you can possibly put a delimiter like below:
"state": "input1|input2|inout3...|input10"
and get the values in the next dialog processor.

jQuery / Javascript > onClick place text at last known cursor position

I have a form I'm working with that allows the user to continually add new rows as needed (used for making an article with multiple "howto" steps, they can click over and over again to add a new step). What I would like to be able to do is have the user be able to click in any of those rows at any time and then click on a word or button that is off to the side that will then insert the value of that button into the last known cursor position.
So for example I may have one form that currently has 3 rows. If the user goes back and wants to insert some data they could click back in the box and hit the button corresponding to the data they want to insert.
Example input 1: "Remove the customers current IP address and replace with their static IP, [USER COULD CLICK HERE AND THEN CLICK THE STATIC IP BUTTON AND %STATIC_IP% WOULD BE INSERTED AT THE LAST KNOWN CURSOR POSITION (AKA HERE)]
Example input 2: "Enter in the customers [Click to insert %WIFI_SSID%] into the router settings"
I have found several other stackoverflow articles that are able to all insert text but they all expect it to be into a defined textarea or input. In this case I'm needing it to insert into the last known cursor position. I hope this is all clear. I look forward to any assistance or questions.
Starter code: http://jsfiddle.net/4mJwU/
If you already know how to insert some arbitrary content at the last known caret position, your only problem is to know which field was focues last time before button was clicked.
That can be done in numerous number of ways, one of those would be utilize focus and blur events (attached to fields - rows in your case) to track (in some variable for example) reference to the field last focused. It should be a piece of cake from there.
Quick and simple script that can get you started http://jsfiddle.net/sjqWu/1/
Combine what you've learned from other stackoverflow anwsers with example above and you should be ok. Happy learning!
I'd question your design. To make the user have to click a field then click some text to insert into that field seems like too many steps. You could possibly utilize some sort of drag and drop routine. Or instead of the first click being a text box, maybe make it a drop down list?
I agree with WTK. You can store the record id or text box id using some sort of event, then proceed from there.

Custom Autocomplete in Google spreadsheet app

My question is the following, is there any tutorial about how to make that when you begin typing on a google spreadsheet cell, the fields belonging to a custom list that contains (anywhere on the text) the typed characters appears in a drop down list.
I do not know a lot of Javascript, so if there's any book or reference where I can found something similar it would be really appreciated.
I am new, and I don't know of any method for allowing the selection of valid values
to be position based upon what the user starts typing (into a cell).
I know this cannot be done within a script. All scripts run after the user
has made all of their changes (to a cell).
You may already know about a drop-down validation list using defined ranges.
This process puts a small down arrow adjacent to the right-edge of the box.
It allows the user to select from a pre-defined list. It does not prevent
the end user from entering invalid values. It just marks their value as
invalid if it does not agree with one of the entries in the list. And
by pressing the down-arrow, the list of valid values is displayed. The
user can select an entry in the list by clicking on it.
I learned about this validation from the documentation. If that is all you need
then you can stop here.
To me the interesting thing about this validation method is:
you can define the list and give it a name. The invalid error message will include the name. You can use the name to indicate the type of validation error.
The list can be contained on a different sheet other than were it is referenced. The sheet that contains the list can be hidden.
If you add a row to the list area that is not the bottom row, (insert below) the spreadsheet engine will automatically adjust the size of the defined range. The new values entered in the list appear in the updated drop-down list (in the order that they appear in the range definition).
What I have not tested is expanding the list from a script. I don't
know if the spreadsheet engine will perform the same range modification
if the change comes from a script. I would hope that it would.
Also I don't know if you make a changes to a hidden sheet from a script,
then will the hidden sheet remain hidden. I know when you do a "copy sheet"
function from a script, the source sheet is temporarily made current,
and is therefore no longer hidden.
Hope this helps.

Categories

Resources