The project will sometimes use AJAX auto-complete query, as in Google's search box, enter the first letter of Chinese characters or letters, the inclusion of this character or letter related items will be displayed for the user to choose, the plug-in is to achieve such a function. AutoComplete official website : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/(jquery can be downloaded AutoComplete plugin).
Using this plugin requires referencing two JS files and a CSS file,
The following are the differences:
jquery Core library file <script src= "./jquery-1.3.2.js" type= "Text/javascript" ></script>
jquery compatible files are required when the jquery version is too high <script src= "~/content/jquery-autocomplete/lib/jquery-migrate-1.2.1.js" ></ Script>
Plugin js file <script src= "./jquery.autocomplete.js" type= "Text/javascript" ></script>
Plug-in style file <link rel= "stylesheet" href= "./jquery.autocomplete.css"/>
The parameters of the plugin are described as follows:?
Minchars This parameter specifies the minimum number of characters that the user enters in the query box before triggering AutoComplete, typically set to 1, that is, if the text box value is not empty, and if the value is 0, Query when the user double-clicks the query text box or deletes the text box contents?
Width The purpose of this parameter is to define the width of the drop box, usually not set, the default value is the same as the <input> element?
Max Query the number of entries displayed in the drop-down list box, DefaultValue is 10?
Delay time (in milliseconds) for activating AutoComplete after the delay keystroke. Default: Remote is 400 local 10?
Does AutoFill (Boolean) automatically populate the INPUT element with the value of the user's mouse when the user chooses, Default:false?
Mustmatch (Boolean) Parameter Boolean, true, if the input query condition does not match the appropriate result, the query value entered in the <input> element is automatically emptied, otherwise it is retained. Default:false
When the Selectfirst (Boolean) parameter is true, the user presses the TAB key or return key to automatically select the first record of the query result into the INPUT element?
Cachelength (number) cache records, that is, get records from the database to cache how many bars, 1 is not cached, defalut:10?
Whether the Matchsubset (Boolean) uses the cache for query results from the server, such as: The last search keyword is Java, then the next time you enter Java for the query, you do not have to connect to the server query again.
Instead, the results from the last query are obtained from the cache, which reduces the number of times the server is accessed and provides performance. Default:true?
Does the MatchCase (Boolean) Turn on case sensitive switches, which are important when using caching?
Multiple (Boolean) allows multivalued queries, and if true, queries to the first result, and then re-enter the query criteria will show the results of subsequent queries.
Multipleseparator (String) This property takes effect only if the multiple property is set to True, which is used to control the delimiter used in a multi-condition query, default: ","?
Scroll (Boolean) sets whether scroll bars are used when the result set is greater than the default height, default:true?
ScrollHeight (number) query the display height of the result box and use scroll when the height is exceeded?
Formatitem (function) calls the function to process every row of data returned by the server, and the return value will be displayed in the drop-down list with the LI element, AutoComplete will provide three parameters (Row,i,max) Where row represents the result array returned by the server side, I is the current number of rows (processing the first few rows of data), Max is the total number of records returned (total number of results queried), default:none, without specifying the result value of the server directly returned
FormatResult (function) function and Formatitem basically similar, also have three parameters of the same effect, temporarily did not find out what is the difference between writing and not writing the function?
Formatmatch (function) is not clear about the functions of the function, in the project module I do not write this function?
Result (handler) return jquery This event is triggered after the user selects an item with the parameter: Event,data,formatted Event object data is the selected row formatted: The return value of the FormatResult function for example: $ ("#singleBirdRemote"). Result (function (event, data, formatted) {To assign values to other controls after selection, triggering other events, and so on?
Extraparams (Object): Provides more parameters for server-side background, the parameters are as follows: {Name:lixiao}, the parameter is automatically appended to the URL after the parameter is passed in the background? Name=lixiao?
Precautions to use: 1: When using a remote address, it defaults to the parameters that are: Q (input value), limit (the maximum value of the returned result), you can use Extraparams to pass in other parameters
jquery Plugin AutoComplete Usage documentation