Interactive Query using select2 plug-in

The overall architecture of a recent project is win8 (metro), which uses many plug-ins, including select2.js (Official Website: ivaynberg. github. ioselect2), this plug-in is very powerful, and I only use one of them-association query. : 1. inputtypetextidnum

Recently with the overall architecture of a project using win 8 (metro) wind, which uses a lot of plug-ins, one of which select2.js (Official Website: http://ivaynberg.github.io/select2 ), this plug-in is very powerful, and I only use one of them-linkage query. : 1. Page input type = text id = num

Recently with the overall architecture of a project using win 8 (metro) style, which uses a lot of plug-ins, one of which select2.js (Official Website: http://ivaynberg.github.io/select2 ), this plug-in is very powerful, and I only use one of them-linkage query.

:

I. Page Section

Ii. js part

$ (Document ). ready (function ({$ ("# num "). select2 ({placeholder: "enter an AS number", // The message minimumInputLength: 1 in the text box, // enter at least n characters before loading data allowClear: true, // whether to allow the user to clear text information ajax: {url: '$ {pageContext. request. contextPath }/......! GetASNumber. do ', // address dataType: 'text', // received data type // contentType: 'application/json', data: function (term, pageNo) {// The term of the data transmitted to the server during query =$. trim (term); return {autNumber: term, // The coordinated query character pageSize: 15, // number of data records loaded at a time pageNo: pageNo, // page number time: new Date () // test }}, results: function (data, pageNo) {if (data. length> 0) {// if no data is found, an empty string var dataObj = eval ("(" + data + ")" is returned ")"); // convert the received JSON string to JSON data var more = (pageNo * 15)
 
  

  
// Format the query result, put the queried id and name in two p and display them in the same row. The last p is right-positioned and the function formatAsText (item) {var itemFmt ="
"+ Item. id +"
"+ Item. name +"
"Return itemFmt ;}
  
Iii. data format to be transmitted by the server: "{'result': [{'id': '000000', 'text': '000000', 'name ': 'china169-BJ '}, {'id': '000000', 'text': '000000', 'name': 'china169-BJ'}], 'Total ': '1 '}"
  
Note: The returned data is in json format, and the result stores some attributes of the First n data records that meet the query conditions. total stores the total number of records that meet the query conditions.
During the association query process, four parameters are transmitted to the server, where asNumber is the data of the specified query, and pageNo and pageSize are used for paging effect (note: you need to implement paging Based on the page number and page number in the background), which represents the page number and the number of records on each page. Here, 15 pieces of data are loaded first, when you scroll to the bottom, 15 pieces of data will be loaded based on the three parameters you passed.
  
In the process of doing this, I encountered some difficulties, because there was very little information about select2, and the examples on the official website were not quite clear. It took three days to make it. I hope you can give me some valuable comments after reading this article.
  
You can download js and css files from the official website or download them at http://download.csdn.net/detail/zdx1515888659/6588415.
  
Note: Pay attention to DOCTYPE when generating code using the editor,It may be difficult to write a style like this. I am not sure what the reason is.