A simplistic plugin for rendering suggestive search results from a remote data source
Because other implementations are annoying, overly complex and didn't have all the options required for the destination application
assumed referenced in the destination project somewhere:
- jQuery >= v1.6
- jQuery-Throttle-Debounce >= v1.1 (only required when you wish to make use of the input debounce feature)
check for the most recent release version within this repo and include the script tags below noting to replace the @pughound_ver with latest.
the jsDelivr CDN picks up releases directly from this repo.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/itb2k13/pughound-js@{@pughound_ver}/jquery-pughound.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/itb2k13/pughound-js@{@pughound_ver}/jquery-pughound.min.css" rel='stylesheet' type='text/css' />apply the class 'pughound' to a target input text element
<input type="text" id="keyword_search" name="keyword_search" class="pughound" placeholder="Search for things..." /> $(document).ready(function () {
var options = {
remotesrc: 'https://www.mydomain.com/api/example.results.json',
mapping: function (n, i) { return { count: n.CountForDisplay, text: n.Presentation, url: n.Url }; },
urlformatting: function (url) { return url; }
};
$('.pughound').pughound(options);
});
$(document).ready(function () {
var options = {
customclass : '',
debounce : 250,
minchars : 3,
fadespeed : 160,
highlightsearch : true,
closeonemptyterm : true,
closeonescape : true,
closeonlinkclicked : false,
showonfocus : true,
loopsaround : true,
autocomplete : 'off',
autofocus : true,
settextonclick : true,
remotesrc : '',
resultstoshow : 12,
showcounts : true,
countformat : '({0})',
ignorekeycodes : [27, 39, 40, 32, 37, 38, 9, 17, 18, 13],
mapping : function(n,i){return {count : n.Count, text : n.Text, url : n.Url, id : n.Id }; },
urlformatting : function(url){return url;},
onanchorclick: function (data) { $('#MyFieldId').val(data.Id); }
};
$('.pughound').pughound(options);
});the url from which results will be obtained (see section 'Remote Sources' further down)
allows a custom JS function to be defined so that remote data sources can be mappend into an object structure that pughound understands. (see section 'Remote Sources' further down)
allows customization of the result-set hrefs (see section 'Remote Sources' further down)
allows specification of a custom function which will execute on the anchor click and has access to the items data element
each pughound element will be given this class allowing for CSS style differentiation when multiple instances of the pughound targets appear on the same page
controls the latency of the user input keydown to trigger a remote call
how may characters must be entered before a remote call for results is made
how fast the results container fades in and out (0 = off/nofade/instant)
whether the results should highlight the search term if found within the result string. if so, a custom class is applied allowing for style overloading
whether the results container should close on user pressing the ESCAPE key
whether the results container should close when one of the search results is clicked
whether the results container will re-show itself if the target element loses and re-gains focus
whether the focus returns to the top element in the result set upon reaching the last element using the DOWN key
can be used to disable the browser auto-complete feature of the target element thus preventing annoying webkit overlays
attemps to force the browser to auto-focus the target element upon page load. not always 100% successful depending on other conflicting JS logic.
upon the user clicking an element in the result-set, this setting determines whether the target element should recieve the full href text of the clicked element.
triggers both jQuery events in this order: 'change' and 'input'
how many results from the remote data source to show in the result-set
whether to show the counts returned by the remote data source (see more on the 'Remote Sources' further below)
if counts are shown, allows customization of the presentation of the number: e.g. (50) or [50] or -50-
prevents a remote call if the keydown keycode exists in the defined list. prevents CTRL, ALT, SHIFT from triggering unwanted calls.