JavaScript - Búsqueda variable

Hola,
Ya he agotado casi mis energías....y no consigo el código.

Necesito un código que permita que al escribir un carácter (por ejemplo @) en un cuadro de texto inicie un auto select desde una base de datos mysql y que el dato encontrado se quede memorizado como variable. A parte esto, que el el dato salga en el cuadro en un color diferente.

Para ser más preciso:

Al escribir @pl..... me selecciona el dato "platano" desde la base de datos, me guarde una variable con el nombre plátano y me salga en el cuadro de texto la escrita "platano" en azul por ejemplo. Lo necesito porque tengo que registrar notas de varios productos y me gustaría que se pudiera seleccionar el producto escribiendo y la nota se asignará al producto en la base de datos.

Gracias.

Saludos a todos.

Esa acción se llama Autocompletar. Puedes conseguir un plugin para Jquery que te permita programarlo. Por ejemplo https://jqueryui.com/autocomplete/

Muchas gracias. Voy a ver que puedo hacer con eso..también permite la opción de que el dato buscado se guarde de alguna forma en el DB? En mi ejemplo...

He comprado 100 @plátano

La palabra plátano seria en azul pero se guardaría en el DB en la fila de plátano el comentario de arriba.

Lo del autocomplete te soluciona lo primero, pero lo de la variable con la bbdd no lo entendí.

¿Guardas la variable en el html o donde?

He mirado el tema del autocomplete pero esto parece mas adaptado a una caja de texto que a un cuadro de texto. Voy a explicar el funcionamento con un pequeño ejemplo nuevamente:

DB
ID....producto...nota
1....platanos
2...manzanas
3...peras

HTML
cuadro de texto en el cual se inserta la nota que seria la siguiente:

"En el dia de hoy se han comprado 20 manzanas y vendido 3 peras"

Al insertar la nota tiene que haber un estilo de autocomplete que una vez se inserte un caracter tipo @ o / permita hacer el autocomplete, y ademas el producto se quedaria evidenciado de algun modo, seria de esta forma:

"En el dia de hoy se han comprado 20 @manzanas y vendido 3 @peras"

Dandole al boton submit la nota se guardaria en el DB según el producto del cual se habla y el DB quedaria de esta forma:

DB
ID....producto...nota
1....platanos
2...manzanas...En el dia de hoy se han comprado 20 manzanas y vendido 3 peras
3...peras...En el dia de hoy se han comprado 20 manzanas y vendido 3 peras

Espero que sea mas claro ahora.

Gracias por las ayudas.

Saludos,

Yo el autocompletar solo lo he usado en una caja de texto no en una textarea.

Y funcionan solo poniendo el nombre, no permiten poner mas datos.

Lo siento en eso no puedo ayudarte.

Ok gracias. A ver si alguien puede.

Muchas gracias a todos modos.