Flex text box automatically prompts (AutoSuggest). Automatically completed (AutoComplete)

2010-10-04  来源:本站原创  分类:Web  人气:191 

Make a small program to use to automatically prompt Flex features a text box, because time is not very tight, so I decided to make their own pieces of the group, spent a night time finally completed. Posted to share with you.

Although there are many such components online, but make their own thinking and under can exercise ability, and the old to eat ready-meals, the total feeling is not so cool ... ... without further ado, to business.

Run-time component screenshot

Flex text box automatically prompts (AutoSuggest). Automatically completed (AutoComplete)

Design ideas

Idea is relatively simple, assembly is divided into two parts, a text box; 2 prompted the drop-down list;

Automatically prompts:

In the text box to enter text in the data source (all the tips items) to find the matching option, if the option to match the number of> 0, in the drop-down list appears below the text box for users to choose;

Auto completion:

Options in matching the most appropriate one (usually the first), and user input to do comparison, the user does not complete the input characters into the text box to complement and complement part of the character set for the election in the state; (Why is selected, if the text is not a complement user needs, user input as long as the text further down on it, without manually remove make up the text)

Code (key point)

1. Interface, making the text box + drop-down list, is not people immediately think of the drop-down list box; the sake of simplicity, I put Flex in Combox "disguised" as TextInput, the code is as follows:

1private function init(){
editable=true;
rowCount=5;
selectedIndex=-1;

isTextBoxStringChange=false;
isfocusInDropDown=false;
isAutoComplete=false;
// Disguised TextBox
setStyle("cornerRadius",0);
setStyle("arrowButtonWidth",0);
setStyle("fontWeight","normal");
setStyle("paddingLeft",0);
}

Than because of the length of ComboBox TextInput Wide, but also to deal with what :

/** *//**
* With the same width of the TextBox
*/
override protected function measure():void
{
super.measure();
measuredWidth=UIComponent.DEFAULT_MEASURED_WIDTH;
}

2. When the text changes, the trigger method to find a match, override the parent class textInput_changeHandler (event: Event) event.

/** *//**
* Text changes
*/
override protected function textInput_changeHandler(event:Event):void
{
if(textInput.text == ""){
isTextBoxStringChange=false;
}
else{
isTextBoxStringChange=true;
}
super.textInput_changeHandler(event);
invalidateProperties();// Call this method call will then be triggered commitProperties()
}

3. Find the match, if the control is specified for automatic completion is to automatically fill the whole operation.

override protected function commitProperties():void{
if(isTextBoxStringChange){
prompt=text;
filter(); // Find matching items
if(isAutoComplete&&!isBackSpaceKeyDown){
var autoCompleteString:String="";
if(dataProvider.length>0)
{
autoCompleteString=itemToLabel(dataProvider[0]);
textInput.setSelection(prompt.length,autoCompleteString.length);
prompt=autoCompleteString;
}
else{
textInput.setSelection(textInput.selectionEndIndex,textInput.selectionEndIndex);
}
}
else{
textInput.setSelection(textInput.selectionEndIndex,textInput.selectionEndIndex);
}
}
super.commitProperties();
}

4. Check if the number of matches to 0, the drop-down list is displayed , Reference choice for users .

/** *//**
* The source data changes, the data is not 0 Pop-up drop-down list
*/
override protected function collectionChangeHandler(event:Event):void
{
super.collectionChangeHandler(event);
if(dataProvider.length>0)
{
open();
}
}

Difficult and easy problem points

1, the text input text box does not show up, because the system defaults to the first position the cursor has been placed, causing the user to enter text to be canceled, so even if all do not need to fill, but also the textInput.setSelection operation as follows:

textInput.setSelection (textInput.selectionEndIndex, textInput.selectionEndIndex); / / This sentence is not superfluous

2, the backspace key does not work, specifically for the backspace key pressed for a FLAG, the special treatment

/** *//**
* Handling the case of the backspace key press
*/
override protected function keyDownHandler(event:KeyboardEvent):void
{
if(!event.ctrlKey&&!event.shiftKey)
{
if(event.keyCode == Keyboard.BACKSPACE)
{
close();
isBackSpaceKeyDown=true;
}
else
{
isBackSpaceKeyDown=false;
}
// When you press the UP key to upward selection , Reach the top, show the user the original text required
if(event.keyCode == Keyboard.UP && selectedIndex==0)
{
selectedIndex=-1;
}
}
super.keyDownHandler(event);
}

相关文章
  • Flex text box automatically prompts (AutoSuggest). Automatically completed (AutoComplete) 2010-10-04

    Make a small program to use to automatically prompt Flex features a text box, because time is not very tight, so I decided to make their own pieces of the group, spent a night time finally completed. Posted to share with you. Although there are many

  • Flex text box to get focus, setup, select all the contents of the cursor to the end. 2011-05-24

    private function setFocusText (): void { txt_content.setFocus (); txt_content.setSelection (txt_content.text.length, txt_content.text.length); }

  • Flex component input box automatically prompts 2010-12-10

    Transfer from http://bbs.airia.cn/thread-7783-1-1.html Flex components automatically prompts the input box first thing to say is that this AutoQueryTextInput component, do Web development should have used the component which is input in the user side

  • EditText input box automatically prompts 2010-12-05

    Enter as shown in the picture the first two letters, followed by the corresponding results will be prompted to suggest that in apidemo There are similar examples to provide, on-line transmission of basically all the examples. This feature is not usef

  • Learning jQuery record ---- imitation GoogleSuggest automatically prompts (8) 2010-08-12

    Automatic prompting procedures are relatively few in front of a little more complicated. Introduce the following ideas: 1, a servlet, used to get front page text box enter the value. Can be forwarded to a JSP page, such as wordxml.jsp. 2, in wordxml.

  • MyEclipse automatically prompts enhancement 2010-04-08

    MyEclipse automatically prompts enhancement Articles Category: Java Programming Enhanced Eclipse, MyEclipse code auto-prompt function normally default, Eclipse, MyEclipse code hinting feature is worse than a lot of Microsoft Visual Studio, mainly Ecl

  • Select the text box can be assisted 2010-11-07

    Component is to assist the selected text box, may use the arrow keys to select, you can use custom data, can interact with the background component code: package pizazz.flex4.component{ import flash.display.DisplayObjectContainer; import flash.events

  • Text box background section shows 2010-05-03

    Text box background sub-display function was not used in a lot of web development. I've seen only in some online banks enter the bank card number, when there was an effect. Enter 4-digit figures, followed by 4 digits into the background of gray, then

  • ASP.NET page response to a text box using javascript Enter event 2010-06-17

    Many shopping website search function, are you after something in the text box, enter a carriage return to jump directly to the search page, but outside press Enter in the text box will not respond, and looked at their own code, like Mall Zhongguancu

  • Click the text box displays the time the drop-down list Data.js 2009-09-09

    1, the introduction of Date.js documents: <script language="javascript" src="images/Date.js"> </ script> 2, in the input text box of time to write on the onfocus (setday (this)) events <td> <input type="text&q

  • wap text box flush solution 2010-03-29

    As the cell phone browser cache problems, we will find that changes in recording sites in the WAP is still time to enter information on a record, that is cached information, for example, modify the information, modify personal information. I found a

  • EXT join in the text box icon 2010-03-17

    EXT join in the text box icon. Define css: Js code. Login (background-image: url (/ ExtDwrJson / images / login_user.gif)! Important; background-repeat: no-repeat; background-position: right;). Password (background-image: url ( / ExtDwrJson / images

  • Javascript control the text box can only import figures 2008-05-21

    Javascript control the text box can only import figures <input onkeypress="return event.keyCode>=48&&event.keyCode<=57||event.keyCode==46" onpaste="return !clipboardData.getData('text').match(/\D/)" ondragenter="r

  • javascript input text box to limit the type of 2009-02-07

    javascript input text box to limit the type of The regular, we used to write some code to the function, Now I come to you as a reference: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&

  • Java Swing text box to enter the Chinese pop-up input window solution 2009-07-02

    java Swing inside the text box will pop up when you enter an "input window", the window people look unhappy, and there are a few bug: 1. In some versions of the jvm, there is a lot of layers of the modal dialog box when the top is using a modal

  • js switch text box read-only and writable dynamic switching 2010-03-21

    Sometimes pages need to temporarily switch the text box read-only or writable, and sometimes we can use simple control can be disabled, but disabled the controls after controlling for the value can not be transmitted to the server, in the realization

  • Front text box data and import and export EXCEL 2010-03-31

    Main points to achieve two functions: (text box on a piece of the picture simply are no rules, but in the same column or peers, the size of different lengths) 1. The reception of all designated areas to export into a text box the value of the EXCEL t

  • Commonly used in javascript based on regular expression text box validation code 2010-03-31

    1, can not be empty <input type="text""if(this.value.replace(/^ +| +$/g,'')=='')alert(' Cannot be empty !')"> 2 can only enter the English and the number <input"if(/[^0-9a-zA-Z]/g.test(value))alert(' There is wrong ')&quo

  • ExtJs for the text box value in several ways 2010-03-27

    1, Html text box, such as: <input type="text" name="test"> Way to obtain the value: var tValue = Ext.getDom ('test'). value; Or var tValue = document.getElementById ('test'). value 2, ExtJs components such as: ( id: 'test', xtype

  • Commonly used javascript regular expression based validation code text box 2010-03-31

    1, can not be empty <input type="text""if(this.value.replace(/^ +| +$/g,'')=='')alert(' Cannot be empty !')"> 2, can only enter numbers in English and <input"if(/[^0-9a-zA-Z]/g.test(value))alert(' There is wrong ')"&