jQuery Autocomplete With External Data Source - pughound.js

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.

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.

  • Publication date: 16.05.2018
  • Source