Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery UI wrapper over Autocomplete that adds pagination
$.widget("paginatedAutocomplete", $.ui.autocomplete, {
options: {
minLength: 1,
sourceUrl: '',
pageSize: 10,
source: function (request, response) {
var self = this;
$.ajax({
url: this.options.sourceUrl,
type: "GET",
dataType: "json",
data: {
per: self.options.pageSize,
term: request.term,
page: self._pageIndex
},
success: function (data) {
var items = data.data;
self._totalItems = data.total;
// Create a menu item for each of the items on the page.
response($.map(items, function (item) {
return {
label: item.text,
value: item.value
}
}));
}
});
},
focus: function () {
// prevent value inserted on focus
return false;
}
},
search: function (value, event) {
// Start a fresh search; Hide pagination panel and reset to 1st page.
this._pageIndex = 0;
$.ui.autocomplete.prototype.search.call(this, value, event);
},
select: function (item) {
var self = this;
// Apply the item's label to the autocomplete textbox.
this._value(item.label);
// Keep track of the selected item.
self._previousSelectedItem = item;
},
close: function (event) {
// Close the pagination panel when the selection pop-up is closed.
this._paginationContainerElement.css('display', 'none');
$.ui.autocomplete.prototype.close.call(this, event);
},
_previousSelectedItem: null,
_totalPages: null,
_totalItems: null,
_pageIndex: 0,
_create: function () {
var self = this;
// Create the DOM structure to support the paginated autocomplete.
this.element.after("<div class='ui-autocomplete-pagination-results'></div>");
this._resultsContainerElement = this.element.next("div.ui-autocomplete-pagination-results");
this._resultsContainerElement.append("<div style='display:none; padding-top: 5px; padding-left: 5px; position: relative; min-width:320px; z-index: 101; left: 0px !important; top: -30px !important' class='ui-autocomplete-pagination-container'>" +
"<button type='button' class='previous-page' style='float: left;'></button>" +
"<button type='button' class='next-page' style='float: left;'></button>" +
"<div style='float:left; width:65%;' class='ui-autocomplete-pagination-details'>" +
"Showing 1-10 of 1000 items.</div>" +
"</div>");
this._paginationContainerElement = this._resultsContainerElement.children("div.ui-autocomplete-pagination-container");
this._nextPageElement = this._paginationContainerElement.find("button.next-page");
this._previousPageElement = this._paginationContainerElement.find("button.previous-page");
this._paginationDetailsElement = this._paginationContainerElement.find("div.ui-autocomplete-pagination-details");
this._nextPageElement.button({ text: false, icons: { primary: "ui-icon ui-icon-arrowthick-1-e" } });
this._previousPageElement.button({ text: false, icons: { primary: "ui-icon-arrowthick-1-w" } });
// Append the menu items (and related content) to the specified element.
if (this.options.appendTo !== null) {
this._paginationContainerElement.appendTo(this._resultsContainerElement);
this._resultsContainerElement.appendTo(this.options.appendTo);
this.options.appendTo = this._resultsContainerElement;
}
else {
this.options.appendTo = this._resultsContainerElement;
}
// Hide default JQuery Autocomplete details (want to use our own blurb).
$(this.element).next("span.ui-helper-hidden-accessible").css("display", "none");
// Event handler(s) for the next/previous pagination buttons.
this._on(this._nextPageElement, { click: this._nextPage });
this._on(this._previousPageElement, { click: this._previousPage });
// Event handler(s) for the autocomplete textbox.
this._on(this.element, {
blur: function (event) {
// When losing focus hide the pagination panel
this._pageIndex = 0;
},
paginatedautocompleteopen: function (event) {
// Autocomplete menu is now visible.
// Update pagination information.
var self = this,
paginationFrom = null,
paginationTo = null,
menuOffset = this.menu.element.offset();
self._totalPages = Math.ceil(self._totalItems / self.options.pageSize);
paginationFrom = self._pageIndex * self.options.pageSize + 1;
paginationTo = ((self._pageIndex * self.options.pageSize) + self.options.pageSize);
if (paginationTo > self._totalItems) {
paginationTo = self._totalItems;
}
// Align the pagination container with the menu.
this._paginationContainerElement.offset({ top: menuOffset.top, left: menuOffset.left });
// Modify the list generated by the autocomplete so that it appears below the pagination controls.
this._resultsContainerElement
.find("ul").prependTo(".ui-autocomplete-pagination-results")
.css({
"padding-top": "60px",
"min-width": "300px",
"z-index": "100"
});
this._paginationDetailsElement.html("Showing " + paginationFrom.toString() + " to " + paginationTo.toString() + " of " + self._totalItems.toString() + " items.");
}
});
// Event handler(s) for the pagination panel.
this._on(this._paginationContainerElement, {
mousedown: function (event) {
// The following will prevent the pagination panel and selection menu from losing focus (and disappearing).
// Prevent moving focus out of the text field
event.preventDefault();
// IE doesn't prevent moving focus even with event.preventDefault()
// so we set a flag to know when we should ignore the blur event
this.cancelBlur = true;
this._delay(function () {
delete this.cancelBlur;
});
}
});
// Now we're going to let the default _create() to do it's thing. This will create the autocomplete pop-up selection menu.
$.ui.autocomplete.prototype._create.call(this);
// Event handler(s) for the autocomplete pop-up selection menu.
this._on(this.menu.element, {
menuselect: function (event, ui) {
var item = ui.item.data("ui-autocomplete-item"); // Get the selected item.
this.select(item);
}
});
},
_nextPage: function (event) {
if (this._pageIndex < this._totalPages - 1) {
this._pageIndex++;
$.ui.autocomplete.prototype._search.call(this, this.term);
}
},
_previousPage: function (event) {
if (this._pageIndex > 0) {
this._pageIndex--;
$.ui.autocomplete.prototype._search.call(this, this.term);
}
},
_change: function (event) {
// Clear the textbox if an item wasn't selected from the menu.
if (((this.selectedItem === null) && (this._previousSelectedItem === null)) ||
(this.selectedItem === null) && (this._previousSelectedItem !== null) && (this._previousSelectedItem.label !== this._value())) {
// Clear values.
this._value("");
}
$.ui.autocomplete.prototype._change.call(this, event);
},
_destroy: function () {
this._paginationContainerElement.remove();
this._resultsContainerElement.remove();
$.ui.autocomplete.prototype._destroy.call(this);
},
__response: function (content) {
var self = this;
self._totalItemsOnPage = content.length;
self._paginationContainerElement.css('display', self._totalItemsOnPage > 0 ? 'block' : 'none');
$.ui.autocomplete.prototype.__response.call(this, content);
}
});
$.widget.bridge("paginatedAutocomplete", $.paginatedAutocomplete);
@RajMy123

This comment has been minimized.

Copy link

RajMy123 commented Feb 13, 2018

how to use this paginatedAutocomplete.js code in html

@buttflattery

This comment has been minimized.

Copy link

buttflattery commented Mar 14, 2018

are there any docs on the usage

@JaservTECH

This comment has been minimized.

Copy link

JaservTECH commented Oct 12, 2018

where is demo site? please

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.