I'd like to get some input from the user:
keywords = prompt("Input keywords separated by commas", "");
I have many various strings stored in an SQLite database that could suggest the user what to type.
Let's say you have an array or list of these strings. How would you code this hinting in Javascript? Are there some functions or code snippets for this functionality?
I'd like it to work similarly as here. When you start typing you get hint with possibilities. There is only one disadvantage, that you can't input more strings separated by commas. Here is this feature working with more strings.
Is prompt() function suitable for this purpose? You can use another way of getting user input.
Thank you
You cannot tweak the native prompt() javascript method.
I know you did not tag with jQuery but would be way easier to use a library to implement such a behavior.
You'll have to build your own dialog system using maybe jQuery UI Dialogs. They have an option to make it modal so the UI is blocked until the dialog is closed.
jQuery UI Dialog will not block javascript execution though like prompt does. You might need to be able to execute code when the dialog is closed. This answer show a way to implement that easily.
Finally, the jQuery UI Autocomplete provides an example on how to use it for multiple values in the same input. They use a comma-separator but I guess you could modify the example to work with whitespaces: jQuery UIAutocomplete Multiple Values
You can't really use any custom functionality with prompt().
You'd be better off creating an <input type="text"/> and hooking the whole thing up to a button, making the data get submitted whenever a use clicks it, or presses enter. Then code it to fetch an autosugges value whenever the user types in a new character.
You should take a look at jQuery UI's autocomplete component (it works with multiple strings as an input as well). You would also need to set up a server-side script that will take a possibly incomplete string as an input and output a possible list of matches back to the browser.
Related
I'm not quite sure exactly what to search for or where exactly to start, but I'm trying to see if it's possible to have a customized search box for multiple GET queries simply using jQuery, JS, HTML and CSS.
The user would first type in something which will prompt the red box to show (key) and it would autofill with a listed default given the first few characters they typed. Then upon pressing enter or tab, they would be allowed to fill in the answer gray box (value). Then after, they can either choose to submit or put in another key / value.
Is there a jQuery library that already has this implemented, and is this even possible? I thought about putting input boxes inside the input search box and using jQuery to hide and show them depending on what they type, but is that the best way?
I'd like to do this without comprehensive framework / library like Angular and React.
Thanks in advance!
You must handle it with one of JavaScript freamworks like Vue.js, React.js or Angular.js
I'm trying to write a wrapper for the Netflix web page in Qt using QWebEngine so that I can use my remote control to navigate. For those who didn't know, the Netflix website can't even be navigated using the arrow keys...
So, anyway, I have used QWebChannel to inject some JavaScript code into the web page, and can (visually, at least) modify the relevant elements:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByName("password")[0].value = "%2";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
This actually works (I can see the fields filled with what I provide for %1 and %2, and the button is pressed programmatically), except for one crucial issue: this results in the messages below the input forms telling me "Please enter a valid email." and "Your password must contain between 4 and 60 characters.". These tell me somehow just setting the HTML elements' values doesn't have the same effect as me manually typing in the values. Could someone help me figure out why this doesn't work, and how I can make it work? I would like to restrict myself to plain JavaScript, it seems like a simple enough task to achieve without e.g. jQuery or some other Javascript library.
I understand this is a terrible way to approach the whole Netflix-on-a-HTPC thing, but I don't want to go digging through e.g. Flix2Kodi's Python to figure out what they are doing (which seems to me is a lot more susceptible to bad breakage than the end result I'm aiming for).
The input field for the email uses some sort of HTML5 and ReactJS validation mix.
However it seems like ReactJS validation cant handle the the dynamic value change, so I tried to find a way to deactivate it, which I did not directly, but I guessed that it has to add some sort of event handler to the form so I came up with this:
var validatingForm = document.getElementsByClassName("simple-login-form")[0];
var nonValidatingForm = document.getElementsByClassName("simple-login-form")[0].cloneNode(true);
validatingForm.parentNode.replaceChild(nonValidatingForm, validatingForm);
which gets rid of all event handlers and therefore ReactJS's validation. Now you can set your value using your code:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
Note that HTML5 is still validating the inputs, so you have to provide an E-Mail Adress, if you want to get rid of that too set the input type to text before changing the value:
document.getElementsByName("email")[0].setAttribute("type", "text");
However the next page after the Button click asks for the password so you'll have to provide it there as I didn't find a way around this.
Buuuuuttt could you not have saved the password in your browser, let it do it's autofill work and fire the click event only?
Are there JQuery features that would help put together a double blind entry <input>?
Basically, an input that requires the exact same text to be entered twice (in the same input box). If they don't match, then the input is cleared (as if they had entered nothing).
jQuery is a framework that has the core functionalities for querying the DOM tree, making animations & etc. It hasn't any UI controls.
Meanwhile there's other library named jQueryUI. It has some popular UI controls, but there isn't such control in it, too.
I think you should write it by yourself.
I have a notepad file of about 10,000 words. I can export them as csv or tab separated values as required. Is there a way for my words to appear as suggestions in a textbox (input type text)?
This word work in the same way as google.
In HTML5 you have the datalist element which gives you a kind of autocomplete feature. Although I'm not really sure about what you want an answer to, for example it is probably not that efficient to put 10 000 words inside the datalist element.
You can use jquery along with some plugin for maximum cross-browsing capability.
Here is an example of what you are trying to achieve http://jqueryui.com/autocomplete/
Click on the vew source link on the page to see how it is done.
Edit:
Since you are using a lot of elements, why not creating an ajax request after the text change to load the elements you want and then stream them into a div right under the text box? This will make you more in control of what the user is seing and it will work on all browsers.
First time asking a question here so please be gentle... I use a set of perl script (no judging please) that are great for simple flat file database creation, updating and searching (www.ezscripting.com/csv). I have used these scripts well beyond the intended uses including being able to display data using a javascript to call the data.
What I'd like to do is have a form field that searches a specific field in the database, let's say . What I'd like to do is allow a visitor to start to type in the search field and have the OnKeyUp event handler trigger a javascript call that will pull up to 5 entries in my database.
Is there a way to have OnKeyUp in an input field tag trigger an embedded javascript each time a new letter is typed?
There's an example here
that uses AJAX to do what I think you're trying to do.