Script. aculo. US development series (6): AutoComplete controls

After effects, we will inevitably mention two controls under controls. JS: AutoComplete and inplaceeditor. These two controls are very popular in the Ajax era.ArticleDescribes how to use the autocomplete control.

Declaration Method New Ajax. AutoComplete ( " Textboxid " , " Choicesid " , " Requesturl " , Options)

Options Parameters

• Paramname: Specifies the parameter name. By default, the name of the text box is passed. If this attribute is set to key, the request page parameter format is key = value.
• Tokens: array or string, with the characters cleared. the default value is []. If minchars is set to 2 and tokens is set to [''], the server will be requested after you type" AB cd "and" AB, in addition, it will listen regularly. This time is the frequency attribute value, but after you type "", the request server will be stopped because it will think that you have not typed any characters, type "cd" and continue to request the server and listen.
• Frequency: Listener period, in seconds. The default value is 0.4 s.
• Minchars: Minimum number of characters on the request server. The default value is 1.
• Indicator: the ID of the page element. It is requesting the server. It is displayed in front of the Request server. The request is hidden.

Request page and display

The HTML returned from the requested page is recommended.CodeIs,
<Ul>
<Li> ...... </LI>
<Li> ...... </LI>
.....
</Ul>
AutoComplete assigns responsetext to $ (choicesid ). innerhtml, this is nothing more than the style used to control the pop-up prompts in CSS, and the class = "selected" of the elements on the mouse sliding"

Related APIs

Currently, only the afterupdateelement function is found. It is triggered when you click the prompt option and accepts two parameters: element, pointing to the text box, And selectedelement, prompt to select

Typical instance

Autocomplete.html< Script Type = "Text/JavaScript" SRC = "Lib/prototype. js" > </ Script >
< Script Type = "Text/JavaScript" SRC = "Lib/scriptaculous. js? Load = effects, controls" > </ Script >
< Script Type = "Text/JavaScript" >
Function Init ()
{
New Ajax. autocompleter ( " Txtsource " , " Choices " , " Autosuggest. asp " ,
{
Paramname: 'sssssssssss ',
Indicator: 'indicator ',
Minchars: 2 ,
Tokens: [''], // It can also be''
Frequency: 0.1 ,
Afterupdateelement: handleafterupdateelement
}
);
}

Event. Observe (window, 'load', init );

FunctionHandleafterupdateelement (element, selectedelement)
{
//Element is the input # txtsource
//Selectedelement is the item you selected, here is Li. Selected
}

</ Script >
< Style Type = "Text/CSS" >
/* Style of the prompt box */
# Choices, input { Border : Solid 1px #000000 ; Width : 300px ; }
/* Ul label style in the prompt box */
# Choices ul { List-style-type : None ; Padding : 0px ; Margin : 0px ; Background-color : # Ffffff ; }
/* Li style under ul label in the prompt box */
# Choices ul Li { Padding : 2px ; }
/* Li style */
# Choices ul Li. Selected { Background-color : # F8f8f8 ; }
</ Style >
</ Head >

< Body >
< H2 > Autucomplete using script. aculo. Us </ H2 >  
< Div >
<! -- Txtsource text box -->
< Input ID = "Txtsource" Name = "Source" Type = "Text" />
<! -- Display at Ajax request, hide at request Completion -->
< Span ID = "Indicator" >
< IMG SRC = "Images/loading.gif" Style = "Display: none ;"   />
</ Span >
< Input Type = "Submit" Name = "Button" ID = "Button" Value = "Submit" Style = "Width: 100px ;"   />
<! -- Select prompt box -->
< Div ID = "Choices" > </ Div >
</ Div >

Autosuggest. asp: it does not matter if you cannot understand it. The key is to obtain the value entered in the text box and use request ("sssssssss ") <% @ Language = " VBScript " CodePage = " 65001 " %>
< Ul >
<%  
Dim I
I = 10
Dim S
Set S = Request ( " Ssssssssss " )
While (I > 0 )
  %>
< Li > <% = S & " __ "   %> <% =   Now () %> ( <% = I %> ) </ Li >
<%  
I = I - 1  
Wend
%>
</ Ul >

This example runs

Last thought

The two images above are the runtime interface, and the second one is the request information viewed under a firebug plug-in under Firefox.

the two screenshots above are designed to illustrate two problems. One is the setting of paramname and the data returned by the server shortly. The other is that there is already something that everyone may be dissatisfied, according to the Chinese habits, In the first figure, the server should not be requested. Such a request is meaningless and we hope to improve the problem together with friends who pass by.