In gmail when we input an email and press the pace bar, the email form a light blue box, and then I can type in another email so that they are separated. (Similar for tags in Stackoverflow?) How can one actually achieve it? I have looked into Tagit, but it's no longer under active development. They suggested Select2 as the alternative, but I don't see how can I achieve the desired effect with no predetermined list of accepted values (All emails should be accepted!).
Any idea how to make it? It is best not to use jQuery UI for this :).
Check out Auto Tokenization for Select2. It allows users to insert non predefined tags (or email adresses in your case). Make sure you define tokenSeparators, for example:
$("#input").select2({
tokenSeparators: [",", " "]}
);
Related
I am trying to build an input component in React wherein user can enter his/her email. However, only emails with #ampf.com should be accepted.
I need to show the text #ampf.com in grayish color as soon as user types in # symbol in the input box. The content entered by the user should however always remain in black color. Only the prediction for '#ampf.com' should display in gray. So, if user keys in 'his_email#a', then only 'mpf.com' should remain in gray color. Likewise, if user keys in 'his_email#am' then only 'pf.com' should remain in gray. And if user keys in 'his_email#something_other_than_ampf.com' then all the predicted grayish text should be removed.
I need to implement this using javascript and css only.
Any help would be highly appreciated.
Some examples of the expected behavior:
AnilYadav#ampf.com
AnilYadav#ampf.com
AnilYadav#ampf.com
AnilYadav#ampf.com
AnilYadav#ab''
Somehow these examples are not showing the difference between black and grayish part of the email.
The simplest way would literally be an input field for the username and then just show a text label inline with the #ampf.com
Then when submitted, simply make up the full email address by combining the username and the static domain string.
<input placeholder=“username” />#ampf.com
I'm pretty sure there are plenty approaches. I just created an example that might help you find your way around.
Feel free to modify and improve it, as it's definitely not perfect.
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 wanting to write a a block style input text box. I realized I might not be describing it correctly and if someone could give me the proper name, I would appreciate it. Basically I want the functionality of how GMail uses their email address client:
I don't need the autocorrect functionality, just the part where a user presses the enter key and it places it in a single entity/block and you can continue to type.
I'm sure there are libraries out there but I've had trouble finding them since I don't know what the technical name for them are. Any examples would be appreciated!
I'm using PHP, jQuery(jquery-1.9.1.min.js and jquery-ui-1.10.0.custom.min.js), Bootstap framework(Bootstrap v3.0.0), AJAX, etc. for my website.
Now at one place I want user to be able to enter multiple email ids into a HTML textfield. It should happen like facebook privacy setting. Following is the screenshot of what I expect to achieve.
From the above image I want the text field to behave like from the "Don't share this with" section. The only difference is here names are getting displayed and I want to add email ids. No auto populate functionality is needed like Facebook.
When user will submit the form then the comma separated list of entered email ids should be sent to the respective method.
I think one of those libraries will help you:
jQuery Tokeninput
Taggle.js
I need functionality in my web application similar to Gmail's drop-down of suggestions when entering recipient addresses, or Stack Overflow's drop-down when entering tags for in question composition.
In Gmail, there is a text field for the "To:" address. Once you start typing, a drop-down appears with suggestions. If you enter a semi-colon or comma, you can enter another address. Again, once you start typing this address, a drop-down appears with suggestions.
The suggestions are the subset of your address book containing the text you've entered. (E.g. if you typed "jo" then "John" and "Foojoe" would appear as suggestions, but "XYZ" would not.) The matched part of the word is highlighted in bold.
If you press "enter" or use the up and down cursor keys, you can navigate around the drop-down suggestion list.
I could presumably program this myself, however I have the feeling there must be standard solutions out there I could incorporate. However, all I found were solutions where the value of the field led to the suggestions, and not the value of the current part of the field led to the suggestions (where each part was separated by a separator, for example "," or ";" in the case of Gmail, or space in the case of Stack Overflow tags).
I am using Wicket (Java server-side Web framework) so any Wicket-specific solution would be great, but otherwise I'm sure I can incorporate any plain Javascript library in the project.
jQueryUI's autocomplete is a great plugin.
http://jqueryui.com/demos/autocomplete/#multiple
The link is to the "multiple values" example which is almost word for word what you described; it matches partial words from the middle, it allows key-based navigation, multiple entries.
You can use the AutoCompleteTextField class in wicket-extensions for this.
Wicket Examples provides a sample implementation as the first item in its AJAX section. The source code link is kind of hard to see, it's at the right edge of the gray bar.
(The description even says "like google suggest!")
There are some JQuery plugins for that out there, for example:
FCBKcomplete
Tokenizing Autocomplete Text Entry
There is a AutoComplete Component in the Wicketstuff project. There is an Blog on how to use it.