0

I'm trying to get an auto-suggest like Google has but without the dropdown. By that I mean the text is suggested inside the textarea (not as a dropdown), see printscreen: Printscreen of google suggest

I know of all the jquery pluggins like jqueryui autocomplete, jquery token, ... and so on. But I don't want a drop down, I just want the text to appear next to the word in grey. If user hits "enter" and the suggestion is put inside.

I have seen this post: Google's predictive text as you type code example - w/o auto suggest dropdown menu.

QUESTIONS

  1. Is there a suitable plug-in?
  2. If no plug-in, how could I do it myself. What steps should I do? Bear in mind that I am a beginner in JavaScript.
Community
  • 1
  • 1
denislexic
  • 10,786
  • 23
  • 84
  • 128
  • 1
    You say that the suggestion should be put in the field when the user hits "enter". But what if I want to enter the word "java" and the system suggests "javascript" - when I hit "enter" the word "javascript" is incorrectly submitted. – simon Feb 02 '12 at 11:18
  • That would indeed cause a problem, but if the user clicks on "space" then enter, should be alright. Not 100% bulletproof, but 99% of the time that problem won't present itself. – denislexic Feb 02 '12 at 12:16
  • 1
    Unfortunately, there are other numerous problems one would have to overcome when writing such a plugin. To mention some: wrapping issue (what if suggested word would cause the textarea text to be wrapped to newline, you would have to detect that beforehand), autocompletion when writing some words in the middle of existing text (you would have to move two parts of the text, insert suggestion in underlying textarea - moving two parts of the text away to make suggestion visible, could be done with spaces, but that wouldn't work well for fonts which have variable character length). – WTK Feb 03 '12 at 13:47
  • @WTK: Those are some pretty awesome points. Didn't think of all that. I guess it'll have to be a text input instead. Do you have a solution for that? – denislexic Feb 03 '12 at 17:07
  • Possible duplicate of [How do I create a suggestion drop-down list like Google's?](https://stackoverflow.com/questions/6169659/how-do-i-create-a-suggestion-drop-down-list-like-googles) – Shivam Sharma Apr 12 '18 at 07:20

1 Answers1

0

I've created simple example with text input instead of textarea that can get you started http://jsfiddle.net/arMCq/16/

In my fiddle, you accept autocomplete suggestion by pressing TAB key.

Note, that the code is just to illustrate how can stuff like this be done. It need tweaks, cleaning and organizing before use in production environments.

WTK
  • 16,583
  • 6
  • 35
  • 45