jQuery Autocomplete With External Data Source - pughound.js

jQuery pughound.js is a small, easy and customizable jQuery autocomplete plugin for the text field that has the ability to fetch suggestions from an external data source you specify.

How to use it:

1. Include the jQuery pughound plugin's files on the webpage which has jQuery library included.

<link href="jquery-pughound.css" rel='"stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script rc="jquery-pughound.js"></script>

2. Include the jQuery jQuery throttle / debounce plugin for the input debounce feature (OPTIONAL).

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

3. Call the function on the target text field and specify the path to the remote data source. The mapping setting is used to map the remote data source.

<input autofocus type="text" class="example">

$('.example').pughound({
  remotesrc: '/path/to/data.json',
  mapping: function (n, i) { return { count: 0, text: n.title, url: n.body, id : n.id }; },
});

4. That's it. Config the autocomplete functionality with the following settings:

$('.example').pughound({

  // additional CSS classes
  customclass : '',

  // debounce execution of a function.
  debounce : 250, 

  // min number of characters to trigger the autocomplete
  minchars : 3, 

  // fade speed in ms
  fadespeed : 160, 

  // highlights results
  highlightsearch : true, 

  // closes when no results
  closeonemptyterm : true, 

  // closes on ESC
  closeonescape : true, 

  // closes on link clicked
  closeonlinkclicked : false,

  // shows on focus
  showonfocus : true,

  // returns to the top element when reaching the last element
  loopsaround : true,

  // disables the browser autocomplete
  autocomplete : 'off',

  // auto focus?
  autofocus : true,

  // recieves the full href text of the clicked element.
  settextonclick : true,

  // the number of results to show
  resultstoshow : 12, 

  // shows counts
  showcounts : true,

  // count format
  countformat : '({0})',

  // ignores the following key codes
  ignorekeycodes : [27, 39, 40, 32, 37, 38, 9, 17, 18, 13],
  
  // url format
  urlformatting : function(url){return url;}, //window.location.href.split('?')[0] + '?' + item.url;

  // callback
  onanchorclick : null
  
});

---

This awesome jQuery plugin is developed by itb2k13. For more Advanced Usages, please check the demo page or visit the official website.