From ac3e45541bc09edd73c1c771340b499498366636 Mon Sep 17 00:00:00 2001 From: thybag Date: Sun, 20 Mar 2016 19:56:57 +0000 Subject: [PATCH 01/14] start updating demo to newer design. Auto highlight on by default. Start putting in infrastructure for tests. --- Gruntfile.js | 55 ++++++++++++++++++++++++ demo/index.html | 111 +++++++++++++++++++++++++++++------------------- package.json | 1 + quickspot.css | 16 +++---- quickspot.js | 35 +++++++-------- 5 files changed, 147 insertions(+), 71 deletions(-) create mode 100644 Gruntfile.js diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..501f89d --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,55 @@ +module.exports = function (grunt) { + "use strict"; + + grunt.loadNpmTasks("grunt-contrib-connect"); + grunt.loadNpmTasks("grunt-contrib-watch"); + grunt.loadNpmTasks("grunt-contrib-uglify"); + grunt.loadNpmTasks("grunt-contrib-copy"); + grunt.loadNpmTasks("grunt-eslint"); + + grunt.initConfig({ + eslint: { + all: { + options: { + configFile: "test/_eslint.json" + }, + src: ["quickspot.js"] + } + }, + uglify: { + all: { + files: { + "quickspot.min.js": ["quickspot.js"] + } + } + }, + copy: { + main: { + src: 'quickspot.*', + dest: 'demo/', + }, + }, + connect: { + all: { + options: { + port: 7070, + hostname: "localhost", + base: ["demo/"], + livereload: 7071 + } + } + }, + watch: { + all: { + files: ["quickspot.js", "quickspot.css"], + tasks: ["default"], + options: { + livereload: true + } + } + } + }); + + grunt.registerTask('default', ['eslint', 'copy', 'uglify']); + grunt.registerTask('server', ['eslint','copy', 'uglify', 'connect', 'watch']); +}; diff --git a/demo/index.html b/demo/index.html index bd0bbdf..552aa5f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,19 +3,55 @@ Quick-Spot - A simple high speed JSON search - + @@ -117,7 +153,7 @@ "data":test_data, "target":"searchbox2", "display_handler": function(co){ - return ''+co.name+' - '+co.award+'
'+co.ucas+' / '+co.subject+''; + return co.name+' - '+co.award+'
'+co.ucas+' / '+co.subject+''; }, "click_handler": function(co){ // You would probably want to do something more useful here @@ -130,41 +166,30 @@ -
+
- -

Quick Spot Demo

-
-
-
-
- -

Normal usage

+ +

Quick Spot Demo

+
+
+
+
-
-
-
-
-
-
-
+
+
Normal usage
+
+
-
-
- -

With custom display (alerts when clicked)

- -
-
-
-
-
-
-
+
+
+
+
With custom display
+
+
diff --git a/package.json b/package.json index bcc2821..14aa5bb 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-connect": "^1.0.0", + "grunt-contrib-copy": "^1.0.0", "grunt-contrib-uglify": "^1.0.1", "grunt-contrib-watch": "^1.0.0", "grunt-eslint": "^18.0.0" diff --git a/quickspot.css b/quickspot.css index 0dd2773..135ce83 100644 --- a/quickspot.css +++ b/quickspot.css @@ -2,24 +2,18 @@ position:relative; /*Oddly IE7 is fine without this, IE8 on the other hand gets a bit confused*/ position:absolute\9; + display:inline-block; } -.quickspot-container input { - height: 20px; - margin-top:5px; - padding:4px 6px; -} +.quickspot-container input {} .quickspot-results-container { - width:340px; + width:100%; position:absolute; - top:35px; left:0; z-index:9999; - border-radius: 0px; - border:solid 1px #08c; + border:solid 1px #777; background:#fff; } .quickspot-results-container .quickspot-results { - max-height:380px; overflow:auto; } @@ -30,6 +24,6 @@ cursor:pointer; } .quickspot-results-container .quickspot-results .quickspot-result.selected{ - background:#08c; + background:#777; color:#fff; } \ No newline at end of file diff --git a/quickspot.js b/quickspot.js index ae94848..ad76c7e 100644 --- a/quickspot.js +++ b/quickspot.js @@ -381,7 +381,7 @@ methods.handleKeyDown = function(event){ // Do nothing if its a control key var key = event.keyCode; - if(key===13||key===38||key===40){ + if (key === 13 || key === 38 || key === 40){ return util.preventDefault(event); } @@ -395,23 +395,23 @@ methods.handleKeyUp = function(event){ var key = event.keyCode; - - if(key === 13){ //enter + + if (key === 13){ //enter methods.handleSelection(here.results[here.selectedIndex]); } - if(key === 38 && here.results.length !== 0){ //up + if (key === 38 && here.results.length !== 0){ //up methods.selectIndex(here.selectedIndex - 1); methods.scrollResults("up"); util.triggerEvent(here.target, "quickspot:select"); } - if(key === 40 && here.results.length !== 0){ // down + if (key === 40 && here.results.length !== 0){ // down methods.selectIndex(here.selectedIndex + 1); methods.scrollResults("down"); util.triggerEvent(here.target, "quickspot:select"); } // prevent default action - if(key === 13 || key === 38 || key === 40){ + if (key === 13 || key === 38 || key === 40){ util.preventDefault(event); } }; @@ -554,7 +554,7 @@ } // Automatically highlight matching portion of text - if (typeof here.options.auto_highlight !== "undefined" && here.options.auto_highlight === true){ + if (here.options.auto_highlight === true){ // Attempt to avoid sticking strong"s in the middle of html tags // http://stackoverflow.com/questions/18621568/regex-replace-text-outside-html-tags#answer-18622606 result_str = result_str.replace(RegExp("(" + here.lastValue + ")(?![^<]*>|[^<>]*<\/)", "i"), "$1"); @@ -676,7 +676,7 @@ here.options.show_results(here.container, here); } else { here.container.style.display = "block"; - } + }@ // show is complete here.resultsVisible = true; }; @@ -685,6 +685,7 @@ this.options = { "key_value": "name", "css_class_prefix": "quickspot", + "auto_highlight": true, "no_results": methods.no_results, "no_results_click": function(val, sbox){} }; @@ -797,10 +798,10 @@ */ this.sort_results_by = function(search){ - if(typeof search === "function"){ + if (typeof search === "function"){ // sort by a custom function? this.results.sort(search); - }else{ + } else { // sort by closest match search = here.options.string_filter(search); this.results = ds.sort_by_match(this.results, search); @@ -830,7 +831,7 @@ this.all = function(unfiltered){ this.results = (unfiltered) ? this.data : this.data_filtered; return this; - } + }; /** * filter data @@ -1164,13 +1165,13 @@ // prevent default util.preventDefault = function(event){ - if (event.preventDefault) { - event.preventDefault(); + if (event.preventDefault) { + event.preventDefault(); } else { event.returnValue = false; } }; - + // High speed occurrences function (amount of matches within a string) // borrowed from stack overflow (benchmarked to be significantly faster than regexp) // http://stackoverflow.com/questions/4009756/how-to-count-string-occurrence-in-string @@ -1253,9 +1254,9 @@ if (!("forEach" in Array.prototype)) { // trim - IE :( if (!String.prototype.trim) { - String.prototype.trim = function () { - return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ""); - }; + String.prototype.trim = function () { + return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ""); + }; } // JSON shim (import CDN copy of json2 if JSON is missing) From 581874a2a4f9e34d9635beeb8adfbb8b570cd980 Mon Sep 17 00:00:00 2001 From: thybag Date: Sun, 20 Mar 2016 19:57:43 +0000 Subject: [PATCH 02/14] remove typo --- quickspot.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/quickspot.js b/quickspot.js index ad76c7e..1f7bb89 100644 --- a/quickspot.js +++ b/quickspot.js @@ -676,7 +676,7 @@ here.options.show_results(here.container, here); } else { here.container.style.display = "block"; - }@ + } // show is complete here.resultsVisible = true; }; From b5bb7849910bd21d52c6b655b1a8f65d3e9aecac Mon Sep 17 00:00:00 2001 From: thybag Date: Tue, 26 Apr 2016 10:58:19 +0100 Subject: [PATCH 03/14] Improve error handling (ajax fails) --- quickspot.js | 46 +++++++++++++++++++++++++++++++++++----------- 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/quickspot.js b/quickspot.js index ae94848..3b3b20b 100644 --- a/quickspot.js +++ b/quickspot.js @@ -126,6 +126,7 @@ * @param options.display_handler - overwrites default display method. * @param options.results_header - Callback that returns either a dom element or markup for the results box header * @param options.results_footer - Callback that returns either a dom element or markup for the results box footer + * @param options.error - callback fired on AJAX failure * ** Events * quickspot:start - search is triggered @@ -137,6 +138,7 @@ * quickspot:result - result is shown * quickspot:resultsfound - search completes with results * quickspot:noresult - search completes with no results + * quickspot:loaded - When quickspot is ready */ methods.attach = function(options){ @@ -163,10 +165,13 @@ here.options.display_name = here.options.key_value; } + // Set init to wait for final load. + here.on("quickspot:loaded", methods.init); + //find data if (typeof here.options.url !== "undefined"){ //Load data via ajax - util.ajaxGetJSON(options, methods.initialise_data); + util.ajaxGetJSON(here.options, methods.initialise_data); } else if (typeof here.options.data !== "undefined"){ //Import directly provided data methods.initialise_data(options.data); @@ -175,7 +180,13 @@ console.log("Error: No datasource provided."); return; } + }; + /** + * Init - generate additional markup & hook up events on QS load + * + */ + methods.init = function(){ // Setup basic DOM stuff for results here.dom = document.createElement("div"); here.dom.className = here.options.css_class_prefix + "-results"; @@ -196,8 +207,8 @@ here.container.className = here.options.css_class_prefix + "-results-container"; // Attach header element if one exists - if (typeof options.results_header !== "undefined"){ - var header = methods.get_option_contents_as_node(options.results_header, true); + if (typeof here.options.results_header !== "undefined"){ + var header = methods.get_option_contents_as_node(here.options.results_header, true); if (header){ here.container.appendChild(header); } @@ -207,9 +218,9 @@ here.container.appendChild(here.dom); // Attach footer element if one exists - if (typeof options.results_footer !== "undefined"){ + if (typeof here.options.results_footer !== "undefined"){ // Attempt to extract markup - var footer = methods.get_option_contents_as_node(options.results_footer, true); + var footer = methods.get_option_contents_as_node(here.options.results_footer, true); if (footer){ here.container.appendChild(footer); } @@ -225,10 +236,10 @@ util.addListener(here.container, "blur", methods.handleKeyUp); // Fire ready callback - if (typeof options.ready === "function") options.ready(here); + if (typeof here.options.ready === "function") here.options.ready(here); // Enable screen reader support - disabled by default as is experimental - if (typeof options.screenreader !== "undefined" && options.screenreader === true){ + if (typeof here.options.screenreader !== "undefined" && here.options.screenreader === true){ methods.screenreaderHelper(); } }; @@ -649,6 +660,9 @@ methods.initialise_data = function(data){ // Set datastore here.setDatastore( datastore.create(data, here.options) ); + // Fire loaded event + util.triggerEvent(here.target, "quickspot:loaded"); + // Fire callback if needed if (typeof here.options.loaded !== "undefined") here.options.loaded(here.datastore); }; @@ -686,7 +700,8 @@ "key_value": "name", "css_class_prefix": "quickspot", "no_results": methods.no_results, - "no_results_click": function(val, sbox){} + "no_results_click": function(val, sbox){}, + "error" : function(http_status, data) { console.log("[Quickspot] AJAX request failed with error " + http_status);} }; }; @@ -1097,9 +1112,18 @@ } xmlhttp.onreadystatechange = function(){ - if ((xmlhttp.readyState === 4) && (xmlhttp.status === 200)) { - // turn JSON in to real JS object & send it to the callback - callback(JSON.parse(xmlhttp.responseText)); + if (xmlhttp.readyState === 4) { + if(xmlhttp.status === 200){ + // turn JSON in to real JS object & send it to the callback + try{ + callback(JSON.parse(xmlhttp.responseText)); + }catch(e){ + options.error('0', xmlhttp.responseText); //0 = js parse fail :( + } + } else { + // Call error callback + options.error(xmlhttp.status, xmlhttp.responseText); + } } }; From 83ac59760f13ca69edf8a67c71cafcb8a4baa799 Mon Sep 17 00:00:00 2001 From: thybag Date: Tue, 26 Apr 2016 17:05:34 +0100 Subject: [PATCH 04/14] Improve screen-reader responsiveness (nvda) --- quickspot.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/quickspot.js b/quickspot.js index d4c5887..6bec560 100644 --- a/quickspot.js +++ b/quickspot.js @@ -301,10 +301,14 @@ methods.screenreaderHelper = function(){ // create screen reader element - var reader = document.createElement("span"); + var reader = document.createElement("div"); reader.setAttribute("aria-live", "assertive"); + reader.setAttribute("aria-relevant", "additions"); reader.className = "screenreader"; reader.setAttribute("style", "position: absolute!important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px);"); + + here.container.setAttribute("aria-hidden", 'true'); + // Add to DOM here.target.parentNode.appendChild(reader); @@ -314,19 +318,20 @@ if (typing) clearTimeout(typing); typing = setTimeout(function(){ if (here.results.length === 0){ - reader.innerHTML = "No suggestions found. Hit enter to search."; + reader.innerHTML = "

No suggestions found. Hit enter to search.

"; } else { - reader.innerHTML = "Found suggestions. Go to " + here.results[here.selectedIndex][here.options.display_name] + "?"; + reader.innerHTML = "

"+here.results.length +" suggestions. 1. Go to " + here.results[here.selectedIndex][here.options.display_name] + "?

"; } }, 400); }); // Announce selection util.addListener(here.target, "quickspot:select", function(){ - reader.innerHTML = "Go to " + here.results[here.selectedIndex][here.options.display_name] + "?"; + reader.innerHTML = "

"+(here.selectedIndex+1)+". Go to " + here.results[here.selectedIndex][here.options.display_name] + "?

"; }); - // Announce selection of link + + // Announce invocation of link util.addListener(here.target, "quickspot:activate", function(){ - reader.innerHTML = "Loading..."; + reader.innerText = "

Loading...

"; }); }; From f82a87981d8d6a805bd6c704b15f05d4515d0865 Mon Sep 17 00:00:00 2001 From: thybag Date: Mon, 9 May 2016 14:42:58 +0100 Subject: [PATCH 05/14] Improve screen reader logic --- quickspot.js | 74 ++++++++++++++++++++++++++++++++++++++-------------- readme.md | 2 +- 2 files changed, 55 insertions(+), 21 deletions(-) diff --git a/quickspot.js b/quickspot.js index 6bec560..fcb534a 100644 --- a/quickspot.js +++ b/quickspot.js @@ -5,7 +5,10 @@ * @repo https://github.com/thybag/quick-spot */ (function(){ - // Privately scoped quick spot object (we talk to the real world (global scope) via the attach method) + "use strict"; + + // Privately scoped quickspot object (we talk to the real world (global scope) via the attach method) + // Additional methods are available in initialised instance & within callbacks var quickspot = function(){ // Internal datastore @@ -17,8 +20,9 @@ this.target = null; // input acting as search box this.dom = null; // ref to search results DOM object this.container = null; // ref to container DOM object + this.reader = null; // ref to node containing screen reader helper this.lastValue = ""; // last searched value - this.resultsVisible = false; // are search results currently visable + this.resultsVisible = false; // are search results currently visible // "here" is kinda a global "this" for quickspot var here = this; @@ -40,7 +44,7 @@ // Public method to change "datastore" powering quickspot this.setDatastore = function(store){ - // if this isn't the inital boot, hide search results + // if this isn't the initial boot, hide search results if (this.datastore !== null){ methods.hideResults(); } @@ -105,7 +109,6 @@ * @param options.prevent_headers - Don't add custom headers such as X-Requested-With (will avoid options requests) * @param options.auto_highlight - Automatically attempt to highlight search text in result items. (true|false - default false) * @param options.max_results - Maximum results to display at any one time (after searching/ordering, results after the cut off won't be rendered. 0 = unlimited) - * @param options.screenreader - Experimental screen reader helper (true|false) * @param options.css_class_prefix - Defaults to "quickspot". Can be used to namespace quickspot classes * @param options.allow_partial_matches - Filter results by individual words rather than by the full phrase. This is enabled by default. (true|false) * @@ -122,10 +125,11 @@ * @param options.data_pre_parse - callback provided with raw data object & options - can be used to rearrange data to work with quick-spot (if needed) * @param options.parse_results - Manipulate result array before render. * @param options.hide_results - override method to hide results container - *@param options.show_results - override method to show results container + * @param options.show_results - override method to show results container * @param options.display_handler - overwrites default display method. - * @param options.results_header - Callback that returns either a dom element or markup for the results box header - * @param options.results_footer - Callback that returns either a dom element or markup for the results box footer + * @param options.screenreader_result_text - overwrite method used to return "screen reader text" from a given result object + * @param options.results_header - Callback that returns either a DOM element or markup for the results box header + * @param options.results_footer - Callback that returns either a DOM element or markup for the results box footer * @param options.error - callback fired on AJAX failure * ** Events @@ -205,6 +209,7 @@ here.container.setAttribute("tabindex", "100"); here.container.style.display = "none"; here.container.className = here.options.css_class_prefix + "-results-container"; + here.container.setAttribute("aria-hidden", 'true'); // Screenreader is provided via "input" field, so ensure results block is ignored // Attach header element if one exists if (typeof here.options.results_header !== "undefined"){ @@ -238,10 +243,8 @@ // Fire ready callback if (typeof here.options.ready === "function") here.options.ready(here); - // Enable screen reader support - disabled by default as is experimental - if (typeof here.options.screenreader !== "undefined" && here.options.screenreader === true){ - methods.screenreaderHelper(); - } + // Enable screen reader support + here.reader = methods.screenreaderHelper(); }; /** @@ -300,39 +303,58 @@ */ methods.screenreaderHelper = function(){ + var result_text, typing; + // create screen reader element var reader = document.createElement("div"); reader.setAttribute("aria-live", "assertive"); reader.setAttribute("aria-relevant", "additions"); reader.className = "screenreader"; reader.setAttribute("style", "position: absolute!important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px);"); - - here.container.setAttribute("aria-hidden", 'true'); - // Add to DOM here.target.parentNode.appendChild(reader); // When user finishes typing, read result status - var typing; util.addListener(here.target, "quickspot:end", function(){ if (typing) clearTimeout(typing); typing = setTimeout(function(){ - if (here.results.length === 0){ - reader.innerHTML = "

No suggestions found. Hit enter to search.

"; + if (here.results.length === 0) { + methods.screenReaderAnnounce("No suggestions found. Hit enter to search."); } else { - reader.innerHTML = "

"+here.results.length +" suggestions. 1. Go to " + here.results[here.selectedIndex][here.options.display_name] + "?

"; + result_text = here.options.screenreader_result_text(here.results[here.selectedIndex], here.selectedIndex, here); + methods.screenReaderAnnounce(here.results.length + " suggestions. " + result_text); } }, 400); }); + // Announce selection util.addListener(here.target, "quickspot:select", function(){ - reader.innerHTML = "

"+(here.selectedIndex+1)+". Go to " + here.results[here.selectedIndex][here.options.display_name] + "?

"; + result_text = here.options.screenreader_result_text(here.results[here.selectedIndex], here.selectedIndex, here); + methods.screenReaderAnnounce(result_text); }); // Announce invocation of link util.addListener(here.target, "quickspot:activate", function(){ - reader.innerText = "

Loading...

"; + methods.screenReaderAnnounce("Loading..."); }); + + return reader; + }; + + /** + * Get screen-reader item text from given result + * This is a default implementation & can be overwritten, returns items in format of "1. Display Name" + * The idx number refers to its position within the result set + * + * @param {Result} result + * @return {string} screen reader text + */ + methods.getScreenReaderResultText = function(result, idx){ + if(typeof result.qs_screenreader_text === 'string'){ + return (idx + 1) + ". " + result.qs_screenreader_text; + } + + return (idx + 1) + ". Go to " + result[here.options.display_name] + "?"; }; /** @@ -656,6 +678,16 @@ return "No results..."; }; + /** + * screenreader: Read tex + * Write text to announce block. This makes screenreader read provided text to the user + * + * @param text - text to read + */ + methods.screenReaderAnnounce = function(text){ + here.reader.innerHTML = "

" + text + "

"; // must be wrapped in p to trigger correct behavior + }; + /** * Initialise data * create a new datastore to allow quick access, filtering and searching of provided data. @@ -685,6 +717,7 @@ // hide is complete here.resultsVisible = false; }; + /** * Show QS results */ @@ -706,6 +739,7 @@ "css_class_prefix": "quickspot", "auto_highlight": true, "no_results": methods.no_results, + "screenreader_result_text": methods.getScreenReaderResultText, "no_results_click": function(val, sbox){}, "error" : function(http_status, data) { console.log("[Quickspot] AJAX request failed with error " + http_status);} }; diff --git a/readme.md b/readme.md index 6118abc..bbbc16f 100644 --- a/readme.md +++ b/readme.md @@ -45,7 +45,6 @@ QuickSpot implements a number of advanced methods which can be used to further c * `options.auto_highlight` - Automatically attempt to highlight search text in result items. (true|false - default false) * `options.max_results` - Maximum results to display at any one time (applied after searching/ordering, results after the cut off will not be rendered. 0 = show unlimited results) * `options.css_class_prefix` - Set custom class name prefix for quickspot. By default "quickspot" will be used. -* `options.screenreader` - Experimental screen reader helper (true|false) * `options.allow_partial_matches` - Filter results by individual words rather than by the full phrase. This is enabled by default. (true|false) In addition you can also extend quickspots base functionality significantly through the use of the following callbacks. @@ -81,4 +80,5 @@ Along with the standard events, quickspot will also fire the following additiona A few additional options can be accessed via setting certain attributes on the search data object. These can either be set within callbacks, or as part of the initial data set. * `qs_result_class` - When set, the class name stored in the attribute will be used as a class on the rendered result's anchor element. +* `qs_screenreader_text` - Sets text to be read by screenreader for this result * `__searchvalues` and `__keyvalue` - By setting both these values, quickspot will assume all data has already been "processed" in to valid quickspot search objects. If only one is set, quickspot will overwrite these values via its normal pre-processing mechanism. Please ensure the `string_filter` returns the same formatting. \ No newline at end of file From ed282bd01c2fe25103dbc101b7c7292abab9d609 Mon Sep 17 00:00:00 2001 From: thybag Date: Mon, 9 May 2016 14:45:58 +0100 Subject: [PATCH 06/14] bump version + update readme --- package.json | 2 +- readme.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 14aa5bb..4b52299 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "quick-spot", - "version": "0.8.2", + "version": "0.8.5", "description": "Quickspot is a fast, flexible JSON powered in-memory search.", "main": "quickspot.js", "files": [ diff --git a/readme.md b/readme.md index bbbc16f..06cb732 100644 --- a/readme.md +++ b/readme.md @@ -58,6 +58,7 @@ In addition you can also extend quickspots base functionality significantly thro * `options.parse_results(search_results, quickspot_options)` - Manipulate the result array before render. * `options.string_filter(string)` - parse string for quickspot searching (Default will make string lower case, and remove punctuation characters) * `options.no_search_handler(searchbox_dom_element, quickspot_instance)` - Callback is run whenever the search box becomes empty +* `options.screenreader_result_text(item_data result_idx, quickspot_instance)` - callback to override how text describing a result for screen-readers is generated * `options.hide_results(results_container, quickspot_instance)` - Callback to override method that hides results container * `options.show_results(results_container, quickspot_instance)` - Callback to override method that shows results container * `options.loaded(datastore)` - Callback is fired when a data store has been loaded From 35f289ecb189e6fd30bea83ec240af8db4825f71 Mon Sep 17 00:00:00 2001 From: Carl Date: Tue, 5 Jul 2016 10:23:02 +0100 Subject: [PATCH 07/14] Correct version --- bower.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 3d2d9cd..ed9344e 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "thybag/quick-spot", - "version": "0.8.2", + "version": "0.8.5", "main": "quickspot.js", "description": "Quickspot is a fast, flexible JSON powered in-memory search. ", "license": "MIT", @@ -9,4 +9,4 @@ "demo/", "readme.md" ] -} \ No newline at end of file +} From da0411b79276e970e1abb2aeb5aee56d6ff6df91 Mon Sep 17 00:00:00 2001 From: thybag Date: Mon, 3 Oct 2016 15:06:53 +0100 Subject: [PATCH 08/14] Refactor some internals, fix some bugs & add better accessors for datastore methods. Expose refresh, filter, clearFilters Dont eat class names on targeted container Add events option to pre-setup some listeners Add show_all_on_blank_search Sort alphabetically when no search input is available. --- quickspot.js | 124 ++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 92 insertions(+), 32 deletions(-) diff --git a/quickspot.js b/quickspot.js index fcb534a..0c9fa53 100644 --- a/quickspot.js +++ b/quickspot.js @@ -63,14 +63,12 @@ this.target.value = ""; this.lastValue = ""; - // get sorting function - var sort_method = (typeof custom_sort === "function") ? custom_sort : function(a, b){ return (a.__keyvalue > b.__keyvalue) ? 1 : -1; }; - // Grab data set - here.results = here.datastore.all(unfiltered).sort_results_by(sort_method).get(); + here.results = here.datastore.all(unfiltered).get(); // & render it all methods.render_results(here.results); + methods.showResults(); }; // Listener helper @@ -88,6 +86,22 @@ methods.hideResults(); }; + // Refresh current listing + this.refresh = function(){ + methods.refresh(); + }; + + // Apply filter to datastore - this will apply to all search values until clearFilters is called. + // Multiple filters can be added + this.filter = function(filter_value, filter_column){ + this.datastore.filter(filter_value, filter_column); + }; + + // Clear all filters currently attached to datastore + this.clearFilters = function(){ + this.datastore.clear_filters(); + }; + /** * Attach a new quick-spot search to the page * @@ -111,6 +125,8 @@ * @param options.max_results - Maximum results to display at any one time (after searching/ordering, results after the cut off won't be rendered. 0 = unlimited) * @param options.css_class_prefix - Defaults to "quickspot". Can be used to namespace quickspot classes * @param options.allow_partial_matches - Filter results by individual words rather than by the full phrase. This is enabled by default. (true|false) + * @param options.show_all_on_blank_search - Rather than hiding the results (default) - instead show full results list when no search term has been entered + * @param options.events - Quick way of binding some initial events on load. Simply an object containing event/callback pairs. * ** Extend methods * @param options.display_handler - overwrites default display method. @@ -132,6 +148,15 @@ * @param options.results_footer - Callback that returns either a DOM element or markup for the results box footer * @param options.error - callback fired on AJAX failure * + * Methods + * qs.refresh() - refresh current search results (use when updating a datastore) + * qs.showResults() - Show results + * qs.hideResults() - Hide results + * qs.setDatastore(newDatastore) - Set a new datastore + * qs.on(event, callback) - Attach an event + * qs.filter(value, filter_on_attribuite) - Applys filter to data set + * qs.clearFilters() - removes filters from dataset + * ** Events * quickspot:start - search is triggered * quickspot:end - search is completed @@ -208,7 +233,7 @@ // Set container attributes here.container.setAttribute("tabindex", "100"); here.container.style.display = "none"; - here.container.className = here.options.css_class_prefix + "-results-container"; + here.container.className = here.container.className + " " + here.options.css_class_prefix + "-results-container"; here.container.setAttribute("aria-hidden", 'true'); // Screenreader is provided via "input" field, so ensure results block is ignored // Attach header element if one exists @@ -240,11 +265,19 @@ // Allows use of commands when only results are selected (if we are not linking off somewhere) util.addListener(here.container, "blur", methods.handleKeyUp); + // Enable screen reader support + here.reader = methods.screenreaderHelper(); + // Fire ready callback if (typeof here.options.ready === "function") here.options.ready(here); - // Enable screen reader support - here.reader = methods.screenreaderHelper(); + // Attach any events in options.events via the `on` method + if(typeof here.options.events === "object"){ + for(var evt in here.options.events){ + here.on(evt, here.options.events[evt]); + } + } + }; /** @@ -350,13 +383,38 @@ * @return {string} screen reader text */ methods.getScreenReaderResultText = function(result, idx){ - if(typeof result.qs_screenreader_text === 'string'){ + if(result && typeof result.qs_screenreader_text === 'string'){ return (idx + 1) + ". " + result.qs_screenreader_text; } return (idx + 1) + ". Go to " + result[here.options.display_name] + "?"; }; + /** + * Refresh current quickspot result listing + * Causes quickspot to re perform the current search & redraw its output. + * Useful when applying filters to the datastore + * + * @return void + */ + methods.refresh = function(){ + // Event for quickspot start (doesn't start if no search is triggered) + util.triggerEvent(here.target, "quickspot:start"); + + // Make selected index 0 again + here.selectedIndex = 0; + + // Perform search, order results & render them + here.results = here.datastore.search(here.lastValue).get(); + + // Render + methods.render_results(here.results); + + // Event for quickspot end + util.triggerEvent(here.target, "quickspot:end"); + util.triggerEvent(here.target, "quickspot:result"); + } + /** * Find and display results for a given search term * @@ -369,9 +427,14 @@ if (typeof here.options.no_search_handler === "function"){ here.options.no_search_handler(here.dom, here); } - //show nothing if no value - here.results = []; - methods.hideResults(); + + if(here.options.show_all_on_blank_search){ + here.showAll(); + }else{ + //show nothing if no value + here.results = []; + methods.hideResults(); + } return; } @@ -383,23 +446,12 @@ return; } - // Event for quickspot start (doesnt start if no search is triggered) - util.triggerEvent(here.target, "quickspot:start"); - // Update last searched value here.lastValue = search; - - // Make selected index 0 again - this.selectedIndex = 0; - - // Perform search, order results & render them - here.results = here.datastore.search(search).get(); - - methods.render_results(here.results); - - // Event for quickspot end - util.triggerEvent(here.target, "quickspot:end"); - util.triggerEvent(here.target, "quickspot:result"); + // refresh list + methods.refresh(); + // show results + here.showResults(); }; /** @@ -629,10 +681,9 @@ // Attach fragment here.dom.appendChild(fragment); - methods.showResults(); // Select the initial value. - methods.selectIndex(this.selectedIndex); + methods.selectIndex(here.selectedIndex); }; /** @@ -738,6 +789,7 @@ "key_value": "name", "css_class_prefix": "quickspot", "auto_highlight": true, + "show_all_on_blank_search": false, "no_results": methods.no_results, "screenreader_result_text": methods.getScreenReaderResultText, "no_results_click": function(val, sbox){}, @@ -855,6 +907,9 @@ if (typeof search === "function"){ // sort by a custom function? this.results.sort(search); + } else if(search == ""){ + // Use alphabetical sorting if no search term was provided. + this.results.sort(function(a, b){ return (a.__keyvalue > b.__keyvalue) ? 1 : -1; }); } else { // sort by closest match search = here.options.string_filter(search); @@ -882,8 +937,10 @@ * @param unfiltered - get all (Without filters) * @return this */ - this.all = function(unfiltered){ + this.all = function(unfiltered, sort_or_term){ this.results = (unfiltered) ? this.data : this.data_filtered; + // Sort all by either function or search term (if nothing is provided, falls back to alphabetical) + this.sort_results_by(typeof sort_or_term === 'undefined' ? '' : sort_or_term); return this; }; @@ -892,7 +949,7 @@ * Apply a filter to the data. Filter will persist unit clear_filters is called. * * @param filter string - * @param colum to apply filter to (by default will use all searchable cols) + * @param on_col - column to apply filter to (by default will use all search-able cols) * @return this */ this.filter = function(filter, on_col){ @@ -900,10 +957,13 @@ if (typeof filter === "function"){ this.results = this.data_filtered = ds.findByFunction(filter, this.data_filtered); } else { - filter = here.options.string_filter(filter); + // If searching on column, we need to use the full string (case, symbols and all) since + // this data is not pre-processed. + if(typeof on_col === "undefined") filter = here.options.string_filter(filter); + this.results = this.data_filtered = ds.find(filter, this.data_filtered, on_col); } - + console.log(this); return this; }; From ebef6a5c98fa1901b5f1fbd1e4c6171c2a8378d0 Mon Sep 17 00:00:00 2001 From: thybag Date: Mon, 3 Oct 2016 15:07:19 +0100 Subject: [PATCH 09/14] Update readme & bump versions --- bower.json | 2 +- package.json | 2 +- readme.md | 18 +++++++++++++++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/bower.json b/bower.json index ed9344e..dac3e5d 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "thybag/quick-spot", - "version": "0.8.5", + "version": "0.9", "main": "quickspot.js", "description": "Quickspot is a fast, flexible JSON powered in-memory search. ", "license": "MIT", diff --git a/package.json b/package.json index 4b52299..cf9abe4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "quick-spot", - "version": "0.8.5", + "version": "0.9", "description": "Quickspot is a fast, flexible JSON powered in-memory search.", "main": "quickspot.js", "files": [ diff --git a/readme.md b/readme.md index 06cb732..de47c81 100644 --- a/readme.md +++ b/readme.md @@ -46,6 +46,8 @@ QuickSpot implements a number of advanced methods which can be used to further c * `options.max_results` - Maximum results to display at any one time (applied after searching/ordering, results after the cut off will not be rendered. 0 = show unlimited results) * `options.css_class_prefix` - Set custom class name prefix for quickspot. By default "quickspot" will be used. * `options.allow_partial_matches` - Filter results by individual words rather than by the full phrase. This is enabled by default. (true|false) +* `options.show_all_on_blank_search` - True|false - Rather than hiding when no search terms are entered, this will instead cause quickspot to list all valid results (results that are not filtered out). False by default. +* `options.events` - Quick method of binding up events. Takes an object of event name, callback pairs. In addition you can also extend quickspots base functionality significantly through the use of the following callbacks. @@ -63,6 +65,7 @@ In addition you can also extend quickspots base functionality significantly thro * `options.show_results(results_container, quickspot_instance)` - Callback to override method that shows results container * `options.loaded(datastore)` - Callback is fired when a data store has been loaded * `options.ready(quickspot_instance)` - Callback fired when quick-spot is fully up & running +* `options.error(http_status, http_text)` - Callback fired on AJAX failure * `options.results_header` - Header for results container (can be Node/ID/raw html or callback returning one of the previous) * `options.results_footer` - Footer for results container (can be Node/ID/raw html or callback returning one of the previous) @@ -82,4 +85,17 @@ A few additional options can be accessed via setting certain attributes on the s * `qs_result_class` - When set, the class name stored in the attribute will be used as a class on the rendered result's anchor element. * `qs_screenreader_text` - Sets text to be read by screenreader for this result -* `__searchvalues` and `__keyvalue` - By setting both these values, quickspot will assume all data has already been "processed" in to valid quickspot search objects. If only one is set, quickspot will overwrite these values via its normal pre-processing mechanism. Please ensure the `string_filter` returns the same formatting. \ No newline at end of file +* `__searchvalues` and `__keyvalue` - By setting both these values, quickspot will assume all data has already been "processed" in to valid quickspot search objects. If only one is set, quickspot will overwrite these values via its normal pre-processing mechanism. Please ensure the `string_filter` returns the same formatting. + +Finally, quickspot also exposes a number of methods on the created instance. + + * `qs.on(event, callback)` - Helper for quickly attaching events to quickspot + * `qs.filter(filter_value)` - Filter data set, applies to all searches on datastore + * `qs.filter(filter_value, attribute)` - Apply dataset filter to a single attribute. + * `qs.clearFilters()` - Removes all currently attached filters from datastore + * `qs.showResults()` - Show results container + * `qs.hideResults()` - Hide results container + * `qs.setDatastore(newDatastore)` - Set a new datastore. Datastores can be created via `quickspot.datastore({url: "bla"});` + * `qs.refresh()` - Refresh current search results (use when updating a datastore) + * `qs.datastore` - provides access to the datastore object itself. + From 07d248d4a1eb4418331697f2e7865b63eb737061 Mon Sep 17 00:00:00 2001 From: thybag Date: Mon, 3 Oct 2016 15:09:40 +0100 Subject: [PATCH 10/14] Quick tidy --- quickspot.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/quickspot.js b/quickspot.js index 0c9fa53..cd37d88 100644 --- a/quickspot.js +++ b/quickspot.js @@ -234,7 +234,7 @@ here.container.setAttribute("tabindex", "100"); here.container.style.display = "none"; here.container.className = here.container.className + " " + here.options.css_class_prefix + "-results-container"; - here.container.setAttribute("aria-hidden", 'true'); // Screenreader is provided via "input" field, so ensure results block is ignored + here.container.setAttribute("aria-hidden", "true"); // Screenreader is provided via "input" field, so ensure results block is ignored // Attach header element if one exists if (typeof here.options.results_header !== "undefined"){ @@ -383,7 +383,7 @@ * @return {string} screen reader text */ methods.getScreenReaderResultText = function(result, idx){ - if(result && typeof result.qs_screenreader_text === 'string'){ + if(result && typeof result.qs_screenreader_text === "string"){ return (idx + 1) + ". " + result.qs_screenreader_text; } @@ -940,7 +940,7 @@ this.all = function(unfiltered, sort_or_term){ this.results = (unfiltered) ? this.data : this.data_filtered; // Sort all by either function or search term (if nothing is provided, falls back to alphabetical) - this.sort_results_by(typeof sort_or_term === 'undefined' ? '' : sort_or_term); + this.sort_results_by(typeof sort_or_term === "undefined" ? "" : sort_or_term); return this; }; @@ -1218,7 +1218,7 @@ try{ callback(JSON.parse(xmlhttp.responseText)); }catch(e){ - options.error('0', xmlhttp.responseText); //0 = js parse fail :( + options.error("0", xmlhttp.responseText); //0 = js parse fail :( } } else { // Call error callback From ba41406179f756e1a8daba6a5e3eb4d883da023b Mon Sep 17 00:00:00 2001 From: thybag Date: Mon, 3 Oct 2016 15:30:07 +0100 Subject: [PATCH 11/14] Fix version --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index dac3e5d..672d169 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "thybag/quick-spot", - "version": "0.9", + "version": "0.9.0", "main": "quickspot.js", "description": "Quickspot is a fast, flexible JSON powered in-memory search. ", "license": "MIT", diff --git a/package.json b/package.json index cf9abe4..619b0a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "quick-spot", - "version": "0.9", + "version": "0.9.0", "description": "Quickspot is a fast, flexible JSON powered in-memory search.", "main": "quickspot.js", "files": [ From 1bdb19d4f9b232f3af63a928ec33f4dc75a8ad20 Mon Sep 17 00:00:00 2001 From: thybag Date: Thu, 6 Oct 2016 21:54:45 +0100 Subject: [PATCH 12/14] Add inital eslint --- .gitignore | 2 + test/_eslint.json | 183 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 185 insertions(+) create mode 100644 .gitignore create mode 100644 test/_eslint.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2ecaaec --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/orig.js +/node_modules diff --git a/test/_eslint.json b/test/_eslint.json new file mode 100644 index 0000000..34676fc --- /dev/null +++ b/test/_eslint.json @@ -0,0 +1,183 @@ +{ + "env": { + "browser": true + }, + "globals": { + "exports": true, + "module": true, + "define": true, + "ActiveXObject": true // IE7 is supported + }, + "rules": { + // ES6 + "arrow-spacing": 2, + "constructor-super": 2, + "no-confusing-arrow": 2, + "no-class-assign": 2, + "no-const-assign": 2, + "no-dupe-class-members": 2, + "no-this-before-super": 2, + //"no-var": 2, + //"prefer-arrow-callback": 2, + "prefer-const": 2, + //"prefer-reflect": 2, + //"prefer-spread": 2, + //"prefer-template": 2, + "require-yield": 2, + + // Legacy / JSHint compat + //"max-depth": [1, 3], + //"max-len": [1, 80], + //"max-statements": [1, 15], + + // Possible Errors + "comma-dangle": 2, + "no-cond-assign": 2, + //"no-constant-condition": 2, + "no-control-regex": 2, + "no-debugger": 2, + "no-dupe-args": 2, + "no-dupe-keys": 2, + "no-duplicate-case": 2, + "no-empty-character-class": 2, + "no-empty": 2, + "no-ex-assign": 2, + "no-extra-boolean-cast": 2, + //"no-extra-parens": 2, + "no-extra-semi": 2, + "no-func-assign": 2, + //"no-inner-declarations": 2, ES6 has block-scoped functions + "no-invalid-regexp": 2, + "no-irregular-whitespace": 2, + "no-negated-in-lhs": 2, + "no-obj-calls": 2, + "no-regex-spaces": 2, + "no-sparse-arrays": 2, + "no-unexpected-multiline": 2, + "no-unreachable": 2, + "use-isnan": 2, + //"valid-jsdoc": [2, { "requireParamDescription": false, "prefer": { "return": "returns" } }], + "valid-typeof": 2, + + // Best Practices + "accessor-pairs": 2, + //"block-scoped-var": 2, + "complexity": 1, + //"consistent-return": 2, + "curly": [2, "multi-line"], + //"default-case": 2, + //"dot-location": [2, "property"], + //"dot-notation": 2, + "eqeqeq": 2, + //"guard-for-in": 2, + //"no-alert": 2, + //"no-caller": 2, + "no-div-regex": 2, + //"no-else-return": 2, + "no-labels": 2, + "no-empty-pattern": 2, + "no-eq-null": 2, + "no-eval": 2, + //"no-extend-native": 2, + "no-extra-bind": 2, + "no-fallthrough": 2, + "no-floating-decimal": 2, + //"no-implicit-coercion": [2, { "boolean": false }], + "no-implied-eval": 2, + //"no-invalid-this": 2, + "no-iterator": 2, + "no-labels": 2, + "no-lone-blocks": 2, + //"no-loop-func": 2, + //"no-magic-numbers": 2, + //"no-multi-spaces": 2, + //"no-multi-str": 2, + "no-native-reassign": 2, + "no-new-func": 2, + "no-new-wrappers": 2, + //"no-new": 2, + "no-octal-escape": 2, + "no-octal": 2, + //"no-param-reassign": 2, + "no-process-env": 2, + "no-proto": 2, + "no-redeclare": 2, + "no-return-assign": 2, + "no-script-url": 2, + "no-self-compare": 2, + "no-sequences": 2, + //"no-throw-literal": 2, + "no-unused-expressions": 2, + "no-useless-call": 2, + //"no-useless-concat": 2, + "no-void": 2, + //"no-warning-comments": 2, + "no-with": 2, + "radix": 2, + //"vars-on-top": 2, no-var is enabled + //"wrap-iife": [2, "inside"], + //"yoda": 2, + + // Variables + //"init-declarations": 2, + "no-catch-shadow": 2, + "no-delete-var": 2, + "no-label-var": 2, + "no-shadow-restricted-names": 2, + //"no-shadow": 2, + "no-undef-init": 2, + "no-undef": 2, + //"no-undefined": 2, + //"no-unused-vars": [2, { "args": "none" }], + //"no-use-before-define": [2, "nofunc"], + + // Code Style + //"array-bracket-spacing": 2, + //"block-spacing": 2, + "brace-style": [2, "1tbs", { "allowSingleLine": true }], + //"camelcase": 2, + "comma-spacing": 2, + "comma-style": 2, + "computed-property-spacing": 2, + //"consistent-this": [2, "this"], // do not alias `this`, use arrow functions + //"func-names": 2, // all anonymous functions should be arrows + //"func-style": [2, "declaration"], + //"id-length": 2, + //"id-match": 2, + "indent": [2, "tab", { "SwitchCase": 1 }], + //"jsx-quotes": 2, + //"key-spacing": 2, + //"linebreak-style": 2, + //"lines-around-comment": [2, { "allowBlockStart": true }], + //"max-nested-callbacks": [2, 3], + "new-parens": 2, + //"newline-after-var": [2, "never"], + "no-array-constructor": 2, + //"no-continue": 2, + //"no-lonely-if": 2, + "no-mixed-spaces-and-tabs": 2, + //"no-multiple-empty-lines": 2, + //"no-negated-condition": 2, + //"no-nested-ternary": 2, + "no-new-object": 2, + "no-spaced-func": 2, + //"no-ternary": 2, + "no-trailing-spaces": 2, + //"no-underscore-dangle": 2, + "no-unneeded-ternary": 2, + //"one-var": [2, { "initialized": "never" }], + "operator-assignment": [2, "always"], + "operator-linebreak": [2, "after"], + //"padded-blocks": [2, "never"], + //"quote-props": [2, "as-needed"], + //"require-jsdoc": 2, + "semi-spacing": 2, + "semi": 2, + //"sort-vars": 2, + "keyword-spacing": 2, + "space-unary-ops": 2, + "quotes": [2, "double"], + "eol-last": 2, + "space-infix-ops": 2 + } +} \ No newline at end of file From b4f088d262db177b114e43bb268ea10088abe5b1 Mon Sep 17 00:00:00 2001 From: thybag Date: Thu, 6 Oct 2016 22:02:02 +0100 Subject: [PATCH 13/14] Fix linting bugs --- quickspot.js | 39 ++++++++++++++++++--------------------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/quickspot.js b/quickspot.js index cd37d88..63d98c7 100644 --- a/quickspot.js +++ b/quickspot.js @@ -4,8 +4,8 @@ * @author Carl Saggs * @repo https://github.com/thybag/quick-spot */ - (function(){ - "use strict"; +(function(){ + "use strict"; // Privately scoped quickspot object (we talk to the real world (global scope) via the attach method) // Additional methods are available in initialised instance & within callbacks @@ -97,7 +97,7 @@ this.datastore.filter(filter_value, filter_column); }; - // Clear all filters currently attached to datastore + // Clear all filters currently attached to datastore this.clearFilters = function(){ this.datastore.clear_filters(); }; @@ -272,12 +272,11 @@ if (typeof here.options.ready === "function") here.options.ready(here); // Attach any events in options.events via the `on` method - if(typeof here.options.events === "object"){ - for(var evt in here.options.events){ + if (typeof here.options.events === "object") { + for (var evt in here.options.events) { here.on(evt, here.options.events[evt]); } } - }; /** @@ -383,7 +382,7 @@ * @return {string} screen reader text */ methods.getScreenReaderResultText = function(result, idx){ - if(result && typeof result.qs_screenreader_text === "string"){ + if (result && typeof result.qs_screenreader_text === "string") { return (idx + 1) + ". " + result.qs_screenreader_text; } @@ -413,7 +412,7 @@ // Event for quickspot end util.triggerEvent(here.target, "quickspot:end"); util.triggerEvent(here.target, "quickspot:result"); - } + }; /** * Find and display results for a given search term @@ -423,14 +422,14 @@ methods.findResultsFor = function(search){ // Don't search on blank - if (search === ""){ - if (typeof here.options.no_search_handler === "function"){ + if (search === "") { + if (typeof here.options.no_search_handler === "function") { here.options.no_search_handler(here.dom, here); } - if(here.options.show_all_on_blank_search){ + if (here.options.show_all_on_blank_search) { here.showAll(); - }else{ + } else { //show nothing if no value here.results = []; methods.hideResults(); @@ -440,7 +439,7 @@ // Avoid searching if input hasn't changed. // Just reshown what we have - if (here.lastValue === search){ + if (here.lastValue === search) { methods.showResults(); util.triggerEvent(here.target, "quickspot:result"); return; @@ -907,7 +906,7 @@ if (typeof search === "function"){ // sort by a custom function? this.results.sort(search); - } else if(search == ""){ + } else if (search === "") { // Use alphabetical sorting if no search term was provided. this.results.sort(function(a, b){ return (a.__keyvalue > b.__keyvalue) ? 1 : -1; }); } else { @@ -953,17 +952,15 @@ * @return this */ this.filter = function(filter, on_col){ - if (typeof filter === "function"){ this.results = this.data_filtered = ds.findByFunction(filter, this.data_filtered); } else { // If searching on column, we need to use the full string (case, symbols and all) since // this data is not pre-processed. - if(typeof on_col === "undefined") filter = here.options.string_filter(filter); + if (typeof on_col === "undefined") filter = here.options.string_filter(filter); this.results = this.data_filtered = ds.find(filter, this.data_filtered, on_col); } - console.log(this); return this; }; @@ -1213,12 +1210,12 @@ xmlhttp.onreadystatechange = function(){ if (xmlhttp.readyState === 4) { - if(xmlhttp.status === 200){ + if (xmlhttp.status === 200) { // turn JSON in to real JS object & send it to the callback - try{ + try { callback(JSON.parse(xmlhttp.responseText)); - }catch(e){ - options.error("0", xmlhttp.responseText); //0 = js parse fail :( + } catch (e) { + options.error("0", xmlhttp.responseText); // 0 = js parse fail :( } } else { // Call error callback From ef2db7084cc268cd15558597bea83bff1129faab Mon Sep 17 00:00:00 2001 From: thybag Date: Thu, 6 Oct 2016 22:04:31 +0100 Subject: [PATCH 14/14] Bump versions & cleanup demo a little --- bower.json | 6 +++-- demo/index.html | 67 ++++++++++++++----------------------------------- package.json | 2 +- 3 files changed, 24 insertions(+), 51 deletions(-) diff --git a/bower.json b/bower.json index 672d169..8267f60 100644 --- a/bower.json +++ b/bower.json @@ -1,12 +1,14 @@ { "name": "thybag/quick-spot", - "version": "0.9.0", + "version": "0.9.1", "main": "quickspot.js", "description": "Quickspot is a fast, flexible JSON powered in-memory search. ", "license": "MIT", "keywords": ["search","quicksearch"], "ignore": [ "demo/", - "readme.md" + "readme.md", + "test/", + ".gitignore" ] } diff --git a/demo/index.html b/demo/index.html index 552aa5f..5e5f973 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,62 +1,33 @@ - Quick-Spot - A simple high speed JSON search + Quick-Spot - A simple, high speed, high flexibility JSON powered search