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
Related
Currenty I am using checkboxes to select more than one value in a form. So when creating a new post I can select all the categories it falls into. But the cat list is getting longer and is becoming a bit unmanagable.
I like how wordpress adds tags to each post via ajax. Wordpress has a text input field with autocomplete, you just start typing and then if it's already there (in the db) then it'll show and get adding to a list dynamically. If it's not found in the list then it gets inserted on form submit.
How can I achieve this or similar so that I don't have to use x amount of checkboxes?
Check out this jQuery library. It works on multi selects instead of checkboxes, but the logic and result is exactly what you need.
http://harvesthq.github.io/chosen/
(not affiliated, I've just used it a few times)
One option would be to make use a library such as jquery-autocomplete
https://www.devbridge.com/sourcery/components/jquery-autocomplete/
This makes use of AJAX based functionality and will give you the ability to tweak it based on values stored in a database table. You can make a simple check function that, in the case the value can not be found, the user will have the option to simply press add and insert it into said library.
The rest is jsut a matter of styling and design.
Currently I am using Jquery Chosen Plugin in order to search the values written inside a search box and it works very well in case I want to search on the basis of the text written inside the option tag. i.e. as shown in the figure:
But what I want to achieve is search on the multiple basis i.e. on the basis of the text written inside the option tag as well as the data attributes of the option tag i.e.
For example in the above figure I may be able to search Debitors either by typing Debitors directly or by typing the data-phone's value i.e.0321-111111. I've searched the chosen plugin's documentation for the possibility to search on the basis of multiple values but, as much as I know, there wasn't any functionality provided by it.
Now what I'd like to ask is, Is there any jQuery plugin providing this multisearch functionality that you may know of?
Thanks.
Finally, I found Select2 Jquery plugin that allows the custom matcher for the searching. i.e. You can define whatever you want plugin's search to search.
I have searched, but cannot find the answer to this question. I think I just do not know the proper name for what I am trying to achieve.
Basically, I want to setup some input fields as if we are creating an account at a website. However, I would like a dialog box to pop up to the right of the input field when the user clicks inside of the input field. This dialog box pop up would provide further information of what exactly needs to go inside the input field to guide the user. I would like the dialog box to not be interactive so it does not get in the way.
I am sure there is some tutorial out there for this. However, I am guessing I just do not know the correct name for this function.
I think you mean a tooltip dialog type of functionality provided by Dojo. This link should provide you with some explanation and examples. The examples show on a button but can be easily done on input field also.
I am pretty sure this would be present in other technologies also like jQuery.
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.
I'm building a nested form in rails 3.1 and instead of pressing the "add" button i want to automaticly add an input field when typing text in an empty input field (just like making a question in facebook and adding poll options). But i also want to only add a field if there are characters typed in the field if the characters are removed the extra field should also be removed.
I am working with rails 3.1 and so jQuery and jquery-rails are included in my gem, i don't know coffee script yet.
it's really easy.
Just tap into the focus() event handler and add textboxes as you go along.
I have created a simple demo for you here: http://jsfiddle.net/mcVnN/
Warning: clicking any textbox will add a new textbox here. If you want to add new textbox ONLY on last textbox focus, just compare the id.
If you have any doubts let me know.
Cheers
--
Sorry, did not read your full question, my mistake.
I have put together some quick code http://jsfiddle.net/mcVnN/12/ again on jsfiddle, but you might want to change it to suit your needs.
I was going through my answers a now and realized I had left you in the middle of nowhere.
Took some time to completely re-write my answer - the above answer is a lot buggier, you are better off using the :last selector than manually trying to keep track of the last text box yourself.
See my rewrite here: http://jsfiddle.net/mcVnN/29/
I have also added a max text box count that you can change easily to configure how many textbox you want users to be able to add.
Please replace the above code with this one, if you are using the above one at all.
Thanks.