jQuery Autocomplete With External Data Source - pughound.js
File Size: | 11.3 KB |
---|---|
Views Total: | 2800 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.