From bb4971df885685ea805d4de75acd8c1f93a7a1cd Mon Sep 17 00:00:00 2001 From: Jonathan Chan Date: Sat, 23 Mar 2019 14:08:37 -0500 Subject: [PATCH] added displayValue option and added to examples and README --- README.md | 40 +++++++++++++++++++++++++++++++-- dist/js/fuzzycomplete.min.js | 2 +- example/examples.html | 43 ++++++++++++++++++++++++++++++++++-- src/js/fuzzycomplete.js | 15 +++++++++---- 4 files changed, 91 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 1326d72..e3ca7c6 100644 --- a/README.md +++ b/README.md @@ -14,9 +14,13 @@ The simplest usage of the plugin is to simply call the plugin on your jQuery sel ## Options -`display` (type: `String`) +`display` (type: `String` or `Function`) -Defines which property of the supplied JSON data will be used as the displayed text. +Defines which property of the supplied JSON data will be used as the displayed text. If function is defined, the function is called during each row to generate the results box row. The function signature should be: `function (result, key) { .. }`. + +`displayValue` (type: `String` or `Function`) + +Controls what data is displayed in the input box after a selection has been made from the results box. Can either be a string to define the key of the result data to display or a function with the signature `function (result, key) { .. }` where the return value will be the data inputted into the input box on selection. `key` (type: `String`) @@ -109,3 +113,35 @@ $(document).ready(function(){ $("#itemPicker").fuzzyComplete(items, options); }); ``` + + +#### Custom ResultsBox & Input Box Selection + +You might want to format results in a special format or combine fields from the search results. You can pass a function as the display option to define custom html in the resultbox. You can use displayValue to select what value to display in the input text box. + +##### Code + +```javascript +var items = [ + {"itemCode":"item3442","itemName":"Bag of doorknobs"}, + {"itemCode":"item3446","itemName":"Blinker fluid"}, + {"itemCode":"item3479","itemName":"Widgets"}, + {"itemCode":"item3495","itemName":"Firefly class transport ship"}, + {"itemCode":"item3400","itemName":"Perpetual motion machine"}, + {"itemCode":"item3454","itemName":"Penrose triangle"} + ]; +var fuseOptions = { keys: ["itemName"] }; +var displayFunction = function(result,id) { + return id + ". " + result['itemName'] " - " + result['itemCode']; +}; +var options = { + display: displayFunction, + displayValue: "itemName", + key: "itemCode", + fuseOptions: fuseOptions +}; + +$(document).ready(function(){ + $("#customResultsBoxPicker").fuzzyComplete(items, options); +}); +``` diff --git a/dist/js/fuzzycomplete.min.js b/dist/js/fuzzycomplete.min.js index 053c733..e6a187d 100644 --- a/dist/js/fuzzycomplete.min.js +++ b/dist/js/fuzzycomplete.min.js @@ -1,2 +1,2 @@ /*! fuzzycomplete 2019-03-23 */ -!function(a){return"undefined"==typeof jQuery?void console.warn("fuzzyComplete plugin requires jQuery"):"undefined"==typeof Fuse?void console.warn("fuzzyComplete plugin requires Fuse.js"):void(a.fn.fuzzyComplete=function(b,c){return this.each(function(){function d(){h.val(g.children(".selected").first().data("id")),f.val(g.children(".selected").first().text())}"undefined"==typeof c&&(c={display:Object.keys(b[0])[0],key:Object.keys(b[0])[0],resultsLimit:4,fuseOptions:{keys:Object.keys(b[0])}});var e=new Fuse(b,c.fuseOptions),f=a(this),g=a("
").addClass("fuzzyResults");f.after(g);var h=a("").attr("name",f.attr("name")).hide();f.after(h),f.removeAttr("name");var i=f.position();i.left+=parseInt(f.css("marginLeft"),10),i.top+=parseInt(f.css("marginTop"),10),g.css({left:i.left,top:i.top+f.outerHeight(),width:f.outerWidth()}),f.keydown(function(a){switch(a.which){case 13:return a.preventDefault(),g.hide(),void d();case 9:return g.hide(),void d()}}),f.keyup(function(b){switch(b.which){case 38:var f=g.find(".selected").first();return f.length?(f.removeClass("selected"),f.prev().length?f.prev().addClass("selected"):g.children().last().addClass("selected")):g.children().last().addClass("selected"),void d();case 40:var f=g.find(".selected").first();return f.length?(f.removeClass("selected"),f.next().length?f.next().addClass("selected"):g.children().first().addClass("selected")):g.children().first().addClass("selected"),void d();case 13:return}var i=e.search(a(this).val());g.empty(),0===i.length&&h.val(null),i.forEach(function(b,e){if(!(e>=c.resultsLimit)){0===e&&h.val(b[c.key]);var f=a("
").data("id",b[c.key]).addClass("__autoitem").on("mousedown",function(a){a.preventDefault()}).click(function(){g.find(".selected").removeClass("selected"),a(this).addClass("selected"),d(),g.hide()});"function"==typeof c.display?f.html(c.display(b,e)):f.text(b[c.display]),"function"==typeof c.displayValue?f.data("displayValue",c.displayValue(b,e)):"string"==typeof c.displayValue?f.data("displayValue",b[c.displayValue]):f.data("displayValue",f.text()),g.append(f)}}),g.children().length?(g.show(),g.children().first().addClass("selected")):g.hide()}),f.blur(function(){g.hide()}),f.focus(function(){g.children().length&&g.show()}),h.append(a("
- - \ No newline at end of file + diff --git a/src/js/fuzzycomplete.js b/src/js/fuzzycomplete.js index bf7565f..85fcd3e 100644 --- a/src/js/fuzzycomplete.js +++ b/src/js/fuzzycomplete.js @@ -46,7 +46,7 @@ function selectCurrent() { selectBox.val(resultsBox.children('.selected').first().data('id')); - searchBox.val(resultsBox.children('.selected').first().text()); + searchBox.val(resultsBox.children('.selected').first().data('displayValue')); } searchBox.keydown(function(e) { @@ -123,10 +123,17 @@ selectCurrent(); resultsBox.hide(); }); - if (typeof options.displayFunction === 'function') { - resultsRow = resultsRow.html( options.displayFunction(result, i) ); + if (typeof options.display === 'function') { + resultsRow.html( options.display(result, i) ); } else { - resultsRow = resultsRow.text(result[options.display]); + resultsRow.text(result[options.display]); + } + if (typeof options.displayValue === 'function') { + resultsRow.data('displayValue', options.displayValue(result, i)); + } else if (typeof options.displayValue === 'string') { + resultsRow.data('displayValue', result[options.displayValue]); + } else { + resultsRow.data('displayValue', resultsRow.text()); } resultsBox.append(resultsRow); });