TinyMCE Autocomplete Without Trigger Character, like gmail - javascript

I'm looking for a way to implement an autocomplete function of some sorts in TinyMCE that does not require a trigger character or shows a list of matches, but in stead suggests the continuation of a sentence like gmail does when you write an email.
(the rest of the sentence is suggested by the application)
In stead of the trigger character, the string to match will have to be for example the last few words typed, or the current sentence so far.
I have the backend to provide the actual suggestion based on a partial sentence but I can not find a way to implement this client side anywhere in the documentation. The only post on stackoverflow that looked relevant did not have the answer.
It does not work to simply not provide any trigger character, and it is also not possible to use a space bar / whitespace as the trigger character. Even if you could, it still needs to query the document for the querystring to send to my backend, not just the characters followed by a trigger character.
Should I not be using the autocomplete functionality for this? Is there a better way? How do I go about doing this?
https://fiddle.tiny.cloud/u7haab/12

Related

Jquery Validation restrict characters on live?

Is there a way to block or restrict special characters from input fields with jquery-validation?
For example, I would like to only authorize those characters [0-9\/]*.
I've read the whole documentation but I haven't found anything. So instead I've to write special codes for this which is not a good choice for the code.
I've seen that other javascript plugin validation can do that like Parsley by using a requirementType. But I don't really want to change the plugin to another cause I already know how to use it now.
Using jQuery validation, you can use this method (http://jqueryvalidation.org/jQuery.validator.addMethod) to add a validator that uses JavScript regex matching to return true or false if the input matches your pattern. This is a very easy way to integrate with the library you're using.
If you want to literally prevent the user from typing characters other than those, you need to attach an event handler to the inputs and block those characters on the keyDown event.
Either way, the matching logic is the same.

Detecting each character inputed in field and run conditionals

I am building a web app. I believe it will be easiest if I try to explain what I want the user experience to look like before I ask my question.
I want my user to go on my site and begin to type in a text field. When each character is inputted, I want to run a conditional statement on that character to decided if it should be added to the text field. If the character inputted is not one I want, the character isn't added.
I have validations in my model to do this after the text is submited, but I want it to be real time. I'm guessing this relates to JavaScript and I am not comfortable enough in coding it to know what to search for/research. Can you assist me in where to look (Tutorials, Concepts, etc)?
Thank you for taking the time to read this.
You can do this with the preventDefault method on the event object passed to the keydown event. This basically tells the browser to not preform its default action (which on a text field would be appending the letter to the field).
Here is an implementation using jQuery for brevity, but you can implement the same functionality in pure javascript as well:
$('input').on('keydown', function(event) {
// event.which is the character code
if ( /* some condition */ ) event.preventDefault();
});
And here is a fiddle with an example where you cannot type the letter A: http://jsfiddle.net/354XJ/
It's not precisely your situation but a very good starting point would be this question and its answers: How to allow only numeric (0-9) in HTML inputbox using jQuery?
You are basically looking for javascript that will intercept the keypress and only allow it if it is an allowed key, the question above implements this for numeric keys - start with that and expand it as per your needs.

Can I highlight multiple words in an HTML textarea that fail my regular expression in Javascript?

Basically, here is the deal.
The application I am working on, the database it uses apparently cannot accept non US-ASCII characters in HTML textareas input fields. Now, our users have had issues copying/pasting in text from PDF documents into these fields. Our research found out that certain characters, like the left and right single quotes, apostrophes and double quote characters in the PDF documents, when pasted into the textarea, somehow are transformed into different characters that are not US ASCII and as such, causes problems within our application.
So, I have a regular expression that will flag non US-ASCII (non US keyboard characters). That part of my POC is working, but now, I'd like it so that when users copy/type in text, that any words that get flagged as non-US ASCII be highlighted in the textarea when user tries to save/submit that data.
Is this possible to do? I can use the select(), but that only highlights the last word that gets flagged. Any help on this would be appreciated!
Thanks!
I suggest using an enhanced textarea (the kind which uses iframes) such as tinyMCE and highlighting the offending text with regular HTML.
See other questions such as this one or this one to see how to highlight text in textareas.

How to use Javascript Autocomplete with Arabic?

I have a text box on a page with auto complete/suggest functionality. The problem is that it is on Arabic and once the format of the word changes, it does not suggest correct matching phrases. For example if I type "ل" in the text box, it will suggest all the words with "ل" in its single form but it will not suggest words/phrases where "ل" is present in one of the joining forms (for example it will not suggest "لاهور").
The standard autocomplete uses substring which isn't useful for languages where a character can change when used in some context (like in Arabic).
I'm not aware of a web framework that handles this case.
You will need to write your own autocomplete code.

Text field containing multiple values, suggestions in a drop-down (like Gmail "To:" field)

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.

Categories