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!
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.
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!
Related
I can find many examples of how to add a tool tip to a drop down list that is the list item itself, i.e. it is to long to be displayed in the list, but that is not what I I need.
What I need is the following;
I have a drop down list that has a list of numbers from 1 to ?? For each number there is a corresponding text item. What I am trying to do is if you expand the list and mouse over a number I need the text item from the separate list to be displayed as a tool tip. Example I mouse over the number 1 and the tool tip display's 'Section 1'.
Is this even possible? If someone can point in the right direction it would be great.
Oh and I am doing this in VB.Net if that makes a difference.
I would recommend adding another dropdown to the drop-down, with text instead of a link. If that makes sense, don't know if the framework you use allows it though =D.
If it isn't a very important feature, you could probably do it with an annotation
I have reached an impass which means I have to spend many hours doing something in a very tedious way because I can't work out a way to do it quickly, here is my problem.
In flash if I make a button that consists of a rectangle and a text field then make it all a button symbol, if I then copy the symbol to multiple instances on screen and change the text in one of them, it changes in all of them because I am changing the symbol.
How can I overcome this, perhaps with actionscript? I tried writing.
button1.text1.text = "test change button text"; on the main canvas (and giving one button a name of button one and the text field within it text1) but it doesn't work.
The only thing I found that works was to make multiple symbol copies of the button but then if I want to change the colour or dimensions of all the buttons it takes ages.
Is there a better way? Using actionscript 2 perhaps, or just some property of the button to allow individual text?
I attempted your situation... and I didn't run into your problem. Text boxes are individual values, provided that the text box is dynamic or input
I think that what may solve your problem is checking what kind of text boxes you are working with. Look in the properties panel; does it say "dynamic"?
Does anyone know of a TextArea component with autocomplete? I understand Flextras.com's Autocomplete can be reskinned as a TextArea but wouldn't know where to begin.
If you just wanted to auto complete on each word, similar to (Ctrl-Space) in most IDEs, then you could try doing it yourself.
I would imagine that you would catch the change event on the text area then do some comparison (something like startsWith) of the characters preceding the carat against some pre-populated collection of words.
Flextras poses a good question, in how do you display suggestions. One idea would be to use a custom context menu, discussed here, containing your suggestions. There's also a decision to be made on when to display it. Do you display it constantly as the user types, or maybe when they use a key combination (Ctrl-Space).
It's an interesting challenge.
I come from the Delphi school. I was really used and pleased with Delphi grids with the plus features of InfoPower. Not just me, my users loves all features that include grids. Some motives for that are:
With grids they have the ability to insert detail information using only the keyboard. Input, Tab, Input, Tab, Input Tab (automatically insert new row), input, tab, etc.
They were able to simply click in a row and edit it´s data.
They could navigate between records using only arrow keys.
In my flex apps I´ve being working arround this quite often, sometimes using a popup to insert data, sometimes using repeater instead of grid. But now I really really need some intuitive, fast way for my users to insert this data.
I am trying to use DataGrid (or AdvancedDataGrid) with inline editors and I am living a real hell to do that. For the last 3 days I am struggling, tweaking and workarrounding in order to try to mimic the features that I had with Delphi.
Main problems are:
DateField simply don´t work as an inline editor. It gets focus but never looses, only with pressing ESC, wich makes me loose the inputed data.
AdvancedAutoComplete: I have a component descendant from AdvancedAutoComplete with a custom browser. The custom browser is a popup, when I try to PopupManager.remove flex raises an exception of a null pointer inside it´s focus managing engines.
I couldn´t get to insert a new line focused in it´s first column when TABing in the last column of last row.
Having all these problems and not getting substantial material to solve them makes me think the (now obvious) fact that it is just not the way grids are intended to work in flex. My question is: what are the patterns used in flex applications to make sequencial, intuitive, fast, keyboard only insertions in a detail?
To answer your question bluntly, there are no specific established patterns to make editing or inserting data in the DataGrid fast and easy. Not being able to Tab between fields is one of the things I really wish Adobe had added to the DataGrid by default.
In order to get the functionality you want, you'll have to do some custom coding and extend/override the DataGrid's default functionality. Switch On The Code has an example up on tabbing between fields, but you would have to build upon their sample a bit further to include features like adding a new row when pressing tab in the last field of the last row in the DataGrid.
You may also want to consider Flexicious. Based on the Flexicious Ultimate demo, it looks like they have the functionality you're looking for (and then some!).
I am not able to figure out how to store long list of values (like a big text) in a dropdown list or in intellisense of search box. I see that it is displaying only half of the text but not full. How to make it appear full in the intellisense or dropdown?
Yes, dropdownlist control or the other similar controls are not suitable for displaying long texts. You should increase their with and it's not look pretty. My recommendation is to develope a tooltip client side script that display the full text, this would help you to show much text than the actual one.