2

I have in my application a larger textbox and offer user the possibility to enter text on several rows like this:

first piece of text

second piece of text

and so on...

Each row is a distinct piece of data that has a significance. The thing is I would like to use ajax auto complete extender functionality after the user types a certain character on a row, such as @, and filter the records in the database according to the first letter the user typed after @, moment when the auto complete suggestion list would appear. For example, third piece of text @Action1, means that after the user typed A he would be prompted with a list of values to choose from.

There are several items of concern for me: first, it is possible to use autocomplete extender only for part of the text in the textbox, and second does it work like this for multiple rows (i.e. one time - in each line behaviour)? Regarding its position, I guess I have no other choice than at the bottom of the textbox it refers to, despite I would have liked it to appear below the @ symbol.

Thank you very much.

Update: I found something similar to what I am looking for here: Twitter-style autocomplete in textarea, but the author only explained briefly his solution. Any help much appreciated, thx!

Community
  • 1
  • 1
Crista23
  • 3,203
  • 9
  • 47
  • 60

2 Answers2

0

Each row is a distinct piece of data that has a significance.

Why are you using a textarea then, and not multiple <input> fields?

Sounds to me like your error in UI design lies right there already, so the rest of my answer is rather theoretical; I probably won’t go into more details as the sensible fix for your problem is the one above.

first, it is possible to use autocomplete extender only for part of the text in the textbox,

Why shouldn’t it be? Cursor position in a textarea for example is readable (although it requires some working around cross-browser issues).

and second does it work like this for multiple rows (i.e. one time - in each line behaviour)?

So long as the line breaks are “hard” ones (made by the user themselves, using enter/return), splitting the actual textarea content by "\n" to have each row as a single value is no problem.

Regarding its position, I guess I have no other choice than at the bottom of the textbox it refers to, despite I would have liked it to appear below the @ symbol.

You could try to roughly measure the @’s position, by line and col number it is on, and match that to the character width and line height, when using a monospace font. For other fonts, some more “magic” might be required to measure the actual width of the previous text before the @ character.

CBroe
  • 91,630
  • 14
  • 92
  • 150
0

I have created a Meteor package for this, which allows both free text and multiple autocomplete sources. Meteor's data model allows for fast multi-rule searching with custom rendered lists. If you're not using Meteor for your web app, (I believe) you unfortunately won't find anything this awesome for autocompletion.

https://github.com/mizzao/meteor-autocomplete

See the link for pictures of how it works. Fork, pull, and improve!

Andrew Mao
  • 35,740
  • 23
  • 143
  • 224