Jquery / Javascript: Google sugiere dentro de textarea (sin menú desplegable)

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.

He visto esta publicación: Ejemplo de código de texto predictivo de Google a medida que escribe: sin menú desplegable de sugerencias automáticas.


  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.

preguntado el 02 de febrero de 12 a las 11:02

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. -

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. -

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: 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? -

1 Respuestas

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.

Respondido 04 Feb 12, 14:02

Almost got it working, any chance you could tell me where you disabled the line break? I can't seem to take it out. jsfiddle.net/arMCq/34 - denisléxico

Where did I disable the line break? - WTK

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.