Jquery. autocomplete plugin extends the scroll bar to load more

Jquery. autocomplete plugin extends the scroll bar to load more

The autocomplete plug-in is used in the project, but the original functions of the plug-in cannot meet all project requirements. Therefore, the following functions are added:

1. paste text to automatically load data

2. scroll to the bottom to load more data.

3. associate with the page plug-in to update data (clear cache)

4. Add a plug-in value to a hidden domain to obtain the text and value (it is easier to use asp.net)

 

If you want to enable the scroll bar to load more data

Add

Scroll: true,

PagingMore: true

When loading more requests, the url parameter will have a page parameter.

It identifies the number of pages of the current request

Ps (This page has a small bug. If the total data volume is exactly a multiple of the number of pages, when the last page is requested, it cannot identify whether there is a next page, so you can request the next page again, due to time reasons, I have not made any improvement and it does not affect normal use)

 

Call Code

 

$ (Document ). ready (function () {var $ Text = // display the Text box var $ Value = // Save the Value of the Text field var $ TxtBtnOrg = // linkage control 1 var $ UserGroup = // linkage control 2 $ Text. autocomplete (.. /Ajax/AutoCompleteAjax. ashx, {minChars: 0, type: POST, extraParams: {// parameter type for Data Request: custom request type, OrgIDs: function () {if ($ TxtBtnOrg) return $ TxtBtnOrg. val ()}, // linkage control value 13. groupID: function () {return $ UserGroup. val ()} // linkage control value}, width: $ Text. width (), auto Fill: false, scroll: true, pagingMore: true, matchContains: word, max: 100, mustMatch: true, dataType: json, valueControl: $ Value, formatItem: function (row, i, max) {return + row. k +;}, formatMatch: function (row, I, max) {return row. k ++ row. v ;}, formatResult: function (row, value) {return row. k ;}, setValue: function (data) {// assign var data = data to the hidden domain here. data | data; var value = data. v |; $ Value. val (value); if (value! =) $ Value. change (); // call the value change event}, parse: function (data) {var parsed = []; for (var I = 0; I <data. length; I ++) {var row = data [I]; if (row) {parsed [parsed. length] = {data: row, value: row. k, result: this. formatResult & this. formatResult (row) };}return parsed ;}}); // The Name value of the user ID (you can initialize the hidden Domain value to initialize the text, of course, you can also assign values to both controls in the background). if ($ Value. val ()! = & $ Text. val () =) $. post (.. /Ajax/AutoCompleteAjax. ashx, {type: getNameByID, gettype: <% = this. autoCompleteType %>, id: $ Value. val ()}, function (data) {console. log (data); if (data & data. name) $ Text. val (data. name)}, json);}); function Control_Reset () {// Of course, the control here does not exist. I didn't need to teach $ Text to retrieve the control. val (). flushCache (); // clear the cache list () $ Value. val ();}

 

Data returned from the background

 

 

Private string GetAutoCompleteUser (string type) {string keys = request [q]; int count = Convert. toInt32 (request [limit]); // The number of returned results can be understood as the page size string tmpOrgIDs _ = request [OrgIDs]; int page = 1; int. tryParse (request [page], out page); // page number (the initial value is 1 because I didn't set the page value at the first request) DataTable dt = GetDtData (type ); var tmpData = dt. asEnumerable (); var tmpData2 = tmpData. distinctBy (c => c. field
 
  
(ID). Where (c => c. Field
  
   
(NAME). Contains (keys). ToList (); if (count! = 0 & page! = 1) // here, if count is 0, all qualified data will be returned {tmpData2 = tmpData2.Skip (page-1) * count ). take (count ). toList ();} else if (count! = 0) {tmpData2 = tmpData2.Take (count ). toList ();} JArray tmpJarr = new JArray (from o in tmpData2 select new JObject (new JProperty (o, o [ORG_NAME]), new JProperty (k, o [NAME]), // personName new JProperty (c, o [code]), new JProperty (v, o [id]. toString () // userID); return tmpJarr. toString ();}