A Paginated JQuery UI Autocomplete Widget

The JQuery UI Autocomplete Widget allows you to return a list of suggestions based upon a query string. The widget works great unless the user does not know what to search for. For example, if the user wants to search through a large database of people using only a single letter (presumably the first letter of the last name) the Autocomplete Widget quickly becomes unwieldy. Either the suggestions need to be truncated or the list of suggestions becomes so large as to be unusable.

To resolve this problem I have extended the JQuery UI Autocomplete Widget and added pagination. Arrows allow the user to cycle through pages of suggestions. Each page of is retrieved using AJAX. Click here for a jsFiddle sample. The sample uses MockJax to simulate the AJAX calls. A complete end-to-end example using ASP.NET MVC is available here.

The Paginated Autocomplete Widget inherits the same API as the Autocomplete Widget from which it is derived. However, there are some differences to be aware of …

First, the web server endpoint that handles the AJAX GET must support three parameters – search, pageSize, and pageIndex. search is the query string provided by the user. pageSize is the number of items to return per page. pageIndex is the page to return.

[HttpGet]
public JsonResult SearchCars(string search, int pageSize=20, int pageIndex=0)
{
   // Your logic here.
}

ASP.NET MVC Controller ActionMethod to support the Paginated Autocomplete Widget.

Second, the Paginated Autocomplete expects a JSON response from the web server in a specific format. The Widget requires this format to facilitate pagination. data is an array of text/value objects that will get bound to to the list of suggestions. total is the total number of unpaginated suggestions that the search query returned.

{
   data : [
      { text : "Item 1", value : 0 },
      { text : "Item 2", value : 1 },
      { text : "Item 3", value : 2 }
   ],
   total : 1000
}

JSON result expected by the Paginated Autocomplete Widget.

Third, when using the Paginated Autocomplete Widget in Javascript you need to specify sourceUrl. The Widget will automatically generate an AJAX GET to the sourceUrl and retrieve paginated suggestions as necessary. This is different than the Autocomplete Widget where you need to define the source method as well as the underlying AJAX GET. The obfuscation is necessary to facilitate pagination. In addition pageSize is an optional parameter that determines the number of suggestions per page.

<input id="myFilter" type="text" />

<script type="text/javascript">

   $(document).ready(function() {

      $("#myFilter").paginatedAutocomplete({
         pageSize: 10,
         sourceUrl: '/Simpsons/SearchCharacters'
      });
   });

</script>

Using the Paginated Autocomplete Widget in Javascript.

The Paginated Autocomplete Widget requires JQuery 1.9.1 or newer and JQuery UI 1.10.3 or newer. I have tested it against Internet Explorer 7/8/9/10, Firefox 21, and Chrome 27. It will probably run in other permutations as well. Please let me know if you have any comments or questions.

---

#JQuery #Javascript #Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded