Taobao Product search function effect:
The following is used to achieve similar effects using the AutoComplete plug-in.
1. Create a ajaxpage.aspx page in which you define the WebMethod method to return all the prompt entries for the input box you need for the search page. The background code is as follows:
3. AutoComplete Parameter Description
*Minchars (number)
The number of characters that the user needs to enter at least before triggering the AutoComplete. Default:1, if set to 0, double click in the input box or delete the contents of the input box to display the list
*Width (number)
Specifies the width of the Drop-down box. Width of default:input element
*Max (number)
AutoComplete Drop-down Displays the number of items. default:10
*Delay (number)
The delay time (in milliseconds) to activate AutoComplete after a keystroke. Default: Remote for 400 local 10
*AutoFill (Boolean)
To automatically fill the input box with the value of the user's current mouse when the user chooses. Default:false
*Mustmatch (Booolean)
If set to True,autocomplete will only allow matching results to appear in the input box, all when the user entered an illegal character will not get the Drop-down box. Default:false
*Matchcontains (Boolean)
Determines whether a match is to be viewed inside a string when comparing, such as whether BA matches the BA in Foo Bar. It is important to use caching. Don't mix with autofill. Default:false
*Selectfirst (Boolean)
If set to True, the first value of the AutoComplete drop-down list is automatically selected when the user types the tab or return key, although it is not manually selected (with the keyboard or mouse). Of course, if a user selects an item, the user selects the value. Default:true
*Cachelength (number)
The length of the cache. That is, how many records to cache for a result set fetched from the database. Set to 1 is not cached. default:10
*Matchsubset (Boolean)
AutoComplete can you use caching for server queries, and if you cache query results for Foo, you don't need to retrieve them if you enter Foo? Use caching directly. This option is usually turned on to reduce the burden on the server to improve performance. will only be valid if the cache length is greater than 1 o'clock. Default:true
*MatchCase (Boolean)
Compare whether the case sensitive switch is turned on. It is important to use caching. If you understand an option, this is not difficult to understand, just like foot to the cache of Foo. Default:false
*Multiple (Boolean)
Whether to allow multiple values to be entered is to use AutoComplete multiple times to enter multiple values. Default:false
*Multipleseparator (String)
When multiple selections are used, separate the characters from each selection. Default: ","
*Scroll (Boolean)
Whether the scroll display is used when the result set is greater than the default height default:true
*ScrollHeight (number)
The scroll height of the auto completion prompt is expressed in pixel size default:180
*Formatitem (Function)
Use the advanced label for each item you want to display. This function is called for each row in the result, and the return value is displayed in the Drop-down list with the LI element. Autocompleter will provide three parameters (row, I, max): The returned array of results, the number of rows currently processed (that is, the first few items, the natural number starting from 1), and the number of the current result array elements, which is the number of items. Default:none, which means that no custom handler function is specified, so that each row in the Drop-down list contains only one value.
*FormatResult (Function)
Similar to Formatitem, but you can format the values that you want to enter into the input text box. There are also three parameters, like Formatitem. Default:none, which means either only data, or values supplied with Formatitem.
The * formatmatch (function)
uses this function to format data for each row of data that needs to be queried. The return value is used for the internal search algorithm. Parameter value row
* extraparams (Object)
to background (typically server-side script) Provides more parameters. As is often the case with a key value pair object. If the pass value is {Bar:4}, it will be parsed into my_autocomplete_backend.php?q=foo&bar=4 by Autocompleter ( Suppose the current user entered Foo). Default: {}
* result (handler)
This event will be triggered after the user selects an item, the parameter is:
Event: Events object. Event.type to result.
Data: Selected rows.
the value returned by the formatted:formatresult function
For example:
$ ("#singleBirdRemote"). Result (function (event, data, formatted) {
//such as assigning values to other controls after selection, triggering other events, and so on
});
Author: Peter [
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
