Site front-end _jquery-Select plugins. Select2 with remote data to implement the default tags selection?

Brief description:

Description: Select2 is the extension of the dropdown box plugin chosen, which makes the ugly long select box look better, more convenient, supports search, remote data, and unlimited scrolling effects.

Related requirements:

1. As a result of the work needs, decided to write a more flexible general CMDB with Python+flask, on the asset editing page you want to be able to search the matching asset group in real time and edit the page to automatically load the last assigned group

Remote Data:

<script type= "Text/javascript" >    $ (". Mgrup"). Select2 ({         ajax: {             url:  "{{ url_for (' Asset.asset_ag_json ')  }}",             dataType:  ' JSON ',             delay: 250,            data : function  (params)  {                 return {                     s: params.term,                     p: params.page                 };             },             processresults: function  (Data, params)  {                 params.page = params.page | |  1;                return  {                     results: data.items,                     pagination: {                          more:  (params.page * 10) &NBSP;&LT;&NBsp;data.total_count                     }                 };            },             cache: true         },        escapeMarkup: function  (data)  {            var markup =  data            return markup         },        minimuminputlength:  1,        templateResult: function  (data)  {             var markup =  ' <div class= "Clearfix" >  +                            ' <div class= ' col-sm-6 > '  + data.id +  ' </ Div> '  +                           ' <div class= ' col-sm-6 ' > '  +  data.name +  ' </div></div> '              return markup        },         templateSelection: function  (data)  {             var markup = data;             return markup.name        },         initSelection: function  (Element, callback) {             $.ajax ({                 url:  ' {{ url_for (' Asset.asset_ag_json ')  } ',                 dataType:  ' JSON ',                 data: {u:   "{{ request.args.get (' uuid ')  }}"  },             }). Done (function  (data) {                 callback (Data.items)              }) &NBSP;&Nbsp;      }    });</script> 

Note: As in the code above, Templateresult is primarily used to render the results returned by the Ajax real-time search, while templateselection is primarily used for callback writing. The tags name of the mgrup corresponding select box, Initselection is mainly used for the first open when the initial state of all tags, check for a long time ~ I rub ...

There are pictures and phases:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/8A/29/wKiom1gpW9PzlbLJAAB4naXaaXE820.png "title=" Select2.png "alt=" Wkiom1gpw9pzlbljaab4naxaaxe820.png "/>

This article is from the "Li-Yun Development Road" blog, please be sure to keep this source http://xmdevops.blog.51cto.com/11144840/1872644

Site front-end _jquery-Select plugins. Select2 with remote data to implement the default tags selection?