Jquery. autocomplete plugin extends the scroll bar to load more

Source: Internet
Author: User

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 ();}
  
 

 

 

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.