Jquery-AutoComplete handling returned JSON objects

Because the autocomplete function is required in the project, I always think that jquery has powerful functions, So Google searched for plug-ins in this field and finally chose jquery. AutoComplete after comparison. Download the demo directly on the official website. It is good to have a demo, but it is normal. Therefore, you can directly test it in your project. The last depressing thing was that the JSON object returned from Ajax could not be parsed. However, it is normal to directly copy the parsed data to the string, and it has been depressing for a long time.

So I checked some information and found that there was very little information in this area. I couldn't read the code with my head. I finally found that I could read the remote data in the code.

function parse(data) {var parsed = [];var rows = data.split("\n");for (var i=0; i < rows.length; i++) {var row = $.trim(rows[i]);if (row) {row = row.split("|");parsed[parsed.length] = {data: row,value: row[0],result: options.formatResult && options.formatResult(row, row[0]) || row[0]};}}return parsed;};

Originally, in the program, line breaks and "|" are used by default. No wonder it cannot be parsed.

Even more depressing, I finally found that the demo has a special example of JSON processing separately, and fainted. Post the code for your reference and avoid detours.

$(function() {function format(mail) {return mail.name + " <" + mail.to + ">";}$("#email").autocomplete('emails.php', {multiple: true,dataType: "json",parse: function(data) {return $.map(data, function(row) {return {data: row,value: row.name,result: row.name + " <" + row.to + ">"}});},formatItem: function(item) {return format(item);}}).result(function(e, item) {$("#content").append("<p>selected " + format(item) + "</p>");});});

The original data in JSON format must be overwritten by the parse method.

Http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Finally, find some information on the Internet

* Minchars (number ):
The number of characters that the user must enter before triggering autocomplete. Default: 1. If it is set to 0, double-click the input box or delete the content in the input box to display the list.
* Width (number ):
Width of the drop-down box. Default: width of the input element
* Max (number ):
AutoComplete drop-down shows the number of projects. Default: 10
* Delay (number ):
The delay time (in milliseconds) for activating AutoComplete after the key is clicked. Default: the remote value is 400 local 10
* AutoFill (Boolean ):
Do you want to automatically enter the user's current mouse value in the input box when the user selects it? default: false
* Mustmatch (booolean ):
If it is set to true, AutoComplete will only allow matching results to appear in the input box. If the user inputs illegal characters, the drop-down box will not be available. Default: false
* Matchcontains (Boolean ):
Determine whether to check the match within the string during comparison, for example, whether Ba matches the BA in Foo bar. It is important to use cache. Do not mix it with AutoFill. Default: false
* Selectfirst (Boolean): If it is set to true, the first value of the autocomplete drop-down list is automatically selected when you type the tab or return key, although it is not manually selected (with a keyboard or mouse ). of course, if you select a project, you can use the selected value. default: True
* Cachelength (number ):
The cache length, that is, the number of records to be cached in the result set obtained from the database. set to 1 as not cached. Default: 10
* Matchsubset (Boolean): Can AutoComplete use the cache for server queries? If the query result for foo is cached, you do not need to search for foo if you enter Foo, and use the cache directly. this option is usually enabled to reduce the burden on the server and improve performance. it is valid only when the cache length is greater than 1. default: True
* Matchcase (Boolean ):
Whether the case sensitivity switch is enabled for comparison. it is important to use the cache. if you understand the previous option, this is not difficult to understand, just like whether foot needs to be searched in the foo cache. default: false
* Multiple (Boolean ):
Whether multiple values can be input. That is, multiple AutoComplete values can be used to input multiple values. Default: false
* Multipleseparator (string ):
If multiple characters are selected, they are used to separate the selected characters. Default :","
* Scroll (Boolean ):
Whether to use Scroll display when the result set is larger than the default height default: True
* Scrollheight (number ):
The scroll height of the Automatic completion prompt is expressed in pixels by default: 180
* Formatitem (function ):
Use advanced labels for each project to be displayed. this function is called for each row in the result. The returned value is contained in the Li element and displayed in the drop-down list. autocompleter will provide three parameters (row, I, max): The returned result array, the number of rows processed currently (that is, the number of items, which is a natural number starting from 1 ), the number of elements in the current result array is the number of items. default: None, indicating that no custom processing function is specified, so that each row in the drop-down list contains only one value.
* Formatresult (function ):
Similar to formatitem, You Can format the value to be entered in the input text box. there are also three parameters, the same as formatitem. default: None, which indicates either data only or the value provided by formatitem.
* Formatmatch (function ):
Use this function to format the data format to be queried for each row of data. The return value is used by the internal search algorithm. The parameter value row
* Extraparams (object ):
Provides more parameters for the backend (generally server scripts. like the common practice, a key-Value Pair object is used. if the passed value is {bar: 4}, it will be parsed into my_autocomplete_backend.php by autocompleter? Q = Foo & bar = 4 (assuming the current user has entered Foo). Default :{}
* Result (handler) returns: jquery
This event is triggered after you select an item. The parameter is:
Event: event object. event. type is result.
Data: The selected data row.
Formatted: value returned by the formatresult Function
For example:
$ ("# Singlebirdremote"). Result (function (event, Data, formatted ){
// For example, assign values to other controls and trigger other events.
});

Formatitem, formatmatch, and formatresult are the key to custom prompt information.

Formatitem is used to format entries in the list. For example, we add "I" to display the words in the list in italic.

Formatmatch is used in combination with formatitem. Its function is that because formatitem is used, the content in the item changes, and we need to match the original data, so we need to make an adjustment using formatmatch, match the original data,

Formatresult defines the final returned data. For example, we still need to return the original data instead of the data that has passed formatitem.