diff options
| author | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2023-03-17 13:30:46 +0200 |
|---|---|---|
| committer | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2023-03-17 13:30:46 +0200 |
| commit | c50d4c645cd3c04204106c4f9f026e5910afa3d5 (patch) | |
| tree | 6cc6bdb9cb159a96b8335419691a08a941ea0165 /html/search2.html | |
| parent | 504732c3d35d003fd5067240b98bc35f03c8cad9 (diff) | |
| download | linkeysearch-c50d4c645cd3c04204106c4f9f026e5910afa3d5.tar.gz linkeysearch-c50d4c645cd3c04204106c4f9f026e5910afa3d5.tar.bz2 linkeysearch-c50d4c645cd3c04204106c4f9f026e5910afa3d5.zip | |
Code tree reorganized; older implemenatations act as a start point
Diffstat (limited to 'html/search2.html')
| -rw-r--r-- | html/search2.html | 642 |
1 files changed, 642 insertions, 0 deletions
diff --git a/html/search2.html b/html/search2.html new file mode 100644 index 0000000..bb88958 --- /dev/null +++ b/html/search2.html @@ -0,0 +1,642 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + + <style> +body { font-family: 'Cantarell', Helvetica, Arial, sans-serif; margin: 2em; } + +.twitter-typeahead { width: 87%; } +.typeahead, .tt-query, .tt-hint { + width: 100%; height: 30px; + padding: 8px 12px; outline: none; + font-size: 20px; line-height: 30px; + border: 2px solid #ccc; border-radius: 8px; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; +} +.tt-menu { + width: 100%; margin: 12px 0; padding: 8px 0; + background-color: #fff; + border: 1px solid #ccc; border-radius: 8px; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); + -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); + box-shadow: 0 5px 10px rgba(0,0,0,.2); +} +.tt-suggestion { padding: 3px 20px; line-height: 24px; font-size: 18px; } +.tt-suggestion:hover { cursor: pointer; } +.tt-suggestion span { padding-left: 16px; font-size: 14px; color: #777; float: right; } +.tt-cursor { background: #ddd; } +.tt-highlight { font-weight: normal; color: #777; } +.tt-hint { color: #9598; } + +#selections { width: 87%; padding-top: 40px; } +#selections div { padding: 4px 40px; line-height: 24px; font-size: 18px; color: #666; } +#selections div span { padding-left: 16px; font-size: 14px; color: #999; float: right; } +.-info- { font-size: 12px !important; color: #959 !important; + font-family: 'JetBrains Mono NL', Consolas, Monaco, monospace, fixed !important; + line-height: 14px !important; border-bottom: 1px solid #ddda; +} +.-info- b { font-weight: 900; } + </style> + + <!-- js labraries --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/bloodhound.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.jquery.min.js"></script> + </head> + <body> + + <div id="the-basics"> + <input class="typeahead" id="tagsInput" type="text" placeholder="try me!"> + </div> + + <div id="selections"> + </div> + + </body> + <script> + + +// PUBLIC VARIABLES //////////////////////////////////////////////////////////// + +var _kwlinks; // keyword links (word-connections; imported via ajax-get) +var _products; // all products (imported via ajax-get) + +var trackSearch = []; // searching analytics + +// setup options +var _maxResults = 24; // limit suggestions +var _blendProds = 4; // minimum final-produncts to blend with next-word suggestions +var _timeout_ms = 100; // time (in ms) for the search engine to find matches (before rendering) +var _allowFuzzy = true; // enable|disable fuzzy search +var _fuzzyLimit = .5; // minimum bigram score for being considered a match +var _Ngram_base = 2 // number of N in Ngram spliting algorithm + + + +// SUPPLEMENTARY FUNCTIONS /////////////////////////////////////////////////////// + +// arrays for kb-format (utf/EL-Gr to ascii translation) +var ORiGiNal = 'ςερτυθιοπασδφγηξκλζχψωβνμΕΡΤΥΘΙΟΠΑΣΔΦΓΗΞΚΛΖΧΨΩΒΝΜάέήίόύώϊΐϋΆΈΉΊΌΎΏΪΫQWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789- '.split(''); +var kbKeyZed = 'sertyuiopasdfghjklzxcvbnmertyuiopasdfghjklzxcvbnmaehioyviiyaehioyviyqwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm0123456789- '.split(''); +const map = new Map(); +for (var i=0; i<ORiGiNal.length; i++) map.set(ORiGiNal[i], kbKeyZed[i]); +// function kb_trans +// translates string to keyboard-latin keys; +// [map]'s implementation is 40x faster than [for]'s +function kb_trans(str) { + str = str.replace('\'',''); + var out = '' + for (var i=0 ; i< str.length; i++) out += map.get(str[i]); + return out; +} + +var ignoredKeys_kb = []; // keywords to ignore (in kb-format) +'μας με σε για του της των από στο στον &'.split(' ').forEach(w => { ignoredKeys_kb.push(kb_trans(w)); }); + + + +// pure JS ajax GET request; return data as JSON +// no fancy things like UTF8; if needed use base64 +// --- +function ajax_get(url, callback) { + var xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = function() { + if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { + + try { + var data = JSON.parse(xmlhttp.responseText); + } catch(err) { + console.log(err.message + " in " + xmlhttp.responseText); + return; + } + callback(data); + } + }; + + xmlhttp.open("GET", url, true); + xmlhttp.send(); +} + + +// Ngram fuzzy match +// --- +const createNgram = (word, n) => { // Ngram creation + if (word.length <3) return word; + const vector = []; + for (let i = 0; i < word.length-n+1; ++i) { + vector.push(word.slice(i, i + n)); + } + return vector; +}; +const checkSimilarity = (a, b) => { // Ngram match score + if (!_allowFuzzy) return 0; + + if (a.length > 0 && b.length > 0) { + const aNgram = createNgram(a, _Ngram_base); + const bNgram = createNgram(b, _Ngram_base); + let hits = 0; + for (let x = 0; x < aNgram.length; ++x) { + for (let y = 0; y < bNgram.length; ++y) { + if (aNgram[x] === bNgram[y]) { + hits += 1; + } + } + } + if (hits > 0) { + const union = aNgram.length + bNgram.length; + return (2.0 * hits) / union; + } + } + return 0; +}; + + +// Search Endine's match functions --------------------------------------------- + + +// check if a searching string -> query (string/latin in kb-format) +// matches an item of the array of synonyms -> chkArr (array of utf-8/strings) +// + option to use fyzzy (bigram) match +// *** return: +// matched string (utf-8) --or-- false (if not matched) +// --- +function check_match( query, chkArr, fuzzy = false ) { + var result = ''; + var found = false; + chkArr.forEach( chk => { + if (!found) { + chk_kb = kb_trans(chk); + if ( (chk_kb.indexOf( query ) !== -1) || (fuzzy && (checkSimilarity(chk_kb, query) > _fuzzyLimit)) ) { + found = true; + result = chk; + } + } + }); + return found ? result : false; +} + + +// check if a searching string -> query (string/latin in kb-format) +// matches exactly an item of the array of synonyms -> chkArr (array of utf-8/strings) +// *** return: true|false +// --- +function is_exact_match( query, chkArr ) { + found = false; + chkArr.forEach( w => { if (kb_trans(w) == query) found = true }); + return found; +} + + +// check if at-least-ONE item from an array of query-words -> qArr (array of string/latin in kb-format) +// matches any item of an array of synonyms -> chkArr (array of utf-8/strings) +// *** return: true|false +// --- +function match_one( qArr, chkArr ) { + found = false; + qArr.forEach( query => { + chkArr.forEach( w => { if (kb_trans(w) == query) found = true }); + }); + return found; +} + + +// compact print of search-tracking +// --- +function echo_tracking() { + var actions = []; + var c; + var chs = 0; // number of characters pressed; + var uis = 0; // number of UI actions used (arrows, enters etc.) + var countingStarted = false; // flag + trackSearch.forEach(e => { + switch(e.v) { + // use of ui actions + case 'ArrowDown' : c = '↓'; uis++; break; + case 'ArrowUp' : c = '↑'; uis++; break; + case 'Enter' : c = '↲ '; uis++; break; + case 'ArrowLeft' : c = '←'; uis++; break; + case 'ArrowRight': c = '→'; uis++; break; + case ' ' : c = '· '; uis++; break; + // ignored keys + case 'Alt' : c = 'Alt'; break; + case 'Control' : c = 'Ctrl'; break; + case 'Escape' : c = 'Esc'; break; + case 'Shift' : c = 'Shft'; break; + case 'Home' : c = 'Home'; break; + case 'End' : c = 'End'; break; + // backspace (user's typing errors) + case 'Backspace' : c = 'BkSp'; break; + case 'Delete' : c = 'Del'; break; + // actual typed characters + default: + if (e.v.length == 1) { + c = '<b><u>'+ e.v +'</u></b>'; + chs++; + } + else { // some non important key; no counter increased + c = e.v; // just record the key + } + } + actions.push(c); + }); + + return actions.join(',') +' (<u>'+ chs +' chs</u>, '+ uis +' uis)'; +} + + +// workline object to track status of async svents +// --- +var workline = { + + trackerJL : 0, + set jsonLoaded(x) { + this.trackerJL = x; + + // fire event on certain values + if (x == 2) { + console.log('All streams loaded'); + + // code to execute + // ... + + } + }, + get jsonLoaded() { return this.trackerJL; } + +}; + + + +// LOAD DATA /////////////////////////////////////////////////////////////////// + +ajax_get('results/keywords.json', function(data) { + _kwlinks = data; + workline.jsonLoaded++; console.log('keywords loaded'); +}); + +ajax_get('results/products.json', function(data) { + _products = data; + workline.jsonLoaded++; console.log('products loaded') +}); + + +// on document ready code /////////////////////////////////////////////////////// +$(document).ready(function() { + + // suggestions engine ////////////////////////////////////////////////////// + // --- + function suggestions_engine(qOrig) { + var results = []; // suggestions to respond + var proList = []; // list of products (for all suggestions) + var commonL = []; // list of common products (for multiple suggestions) + var possibleNext = []; // list of possible next suggestions + + var root, last; + + // clean q(uery) string from symbols and multiple spaces + var q = qOrig.replace('+',' ').replace('.',' ') + .replace(' ',' ') + .replace(' ',' '); + + var qAr = q.split(' '); // split to words + + if (qAr.length == 1) { // suggest 1st word //////////////////////// + var kbq = kb_trans(q) + + // loop through root-words + // ... to match all possible suggestions; + _kwlinks.forEach( it => { + chk = check_match(kbq, it.w, true); + + if ( chk != false ) { + results.push({ w: chk }); + + // ... also keep possible products in a list + it.c.forEach( wo => { // for every Word-Link-Node + if (proList.length < _maxResults + 1) { + // concatenate this-suggestion's product sub-list (wo.p) + // to all-suggestions posiible products-list (proList) + proList = proList.concat(wo.p); + // keep unique products in the products-list + proList = proList.filter((item, i, ar) => ar.indexOf(item) === i); + } + }); + } + + }); + } + + if (qAr.length == 2) { // suggest 2nd word /////////////////////////// + root = qAr[0]; + last = qAr[1]; + kbroot = kb_trans(root); + kblast = kb_trans(last); + + _kwlinks.forEach( it => { // locate the ... + if (is_exact_match(kbroot, it.w)) { // exact match of root-word + + it.c.forEach ( wo => { // loop the word-links ... + chk = check_match(kblast, wo.w, true); + if ( chk !== false ) { // if a match is found + results.push({ // keep suggestion + w: root +' '+ chk, + f: wo.f + }); + if (proList.length < _maxResults + 1) { // plus... + proList = proList.concat(wo.p); // keep products-list + proList = proList.filter((item, i, ar) => ar.indexOf(item) === i); + } + } + }); + + } + }); + } + + if (qAr.length > 2) { // suggest N-th word (N>2) ///////////////// + root = qAr.shift(); // isolate first item of qAr + last = qAr.pop(); // isolate last item too + // now qAr includes only the items after root and before last; + // so qAr includes all already selected suggestions (but root) + + // prepare/cache kb-formated string for any key we're going to use + var kb_qAr = []; // array of selected suggestions in kb-format + qAr.forEach( w => { kb_qAr.push(kb_trans(w)); }) + kbroot = kb_trans(root); + kblast = kb_trans(last); + + _kwlinks.forEach( it => { + if (is_exact_match(kbroot, it.w)) { // locate root-word + + // calculate list of common items/products (commonL) + // for selected suggestions + is1stOcc = true; // 1st occurance flag + + it.c.forEach ( swo => { + if (match_one(kb_qAr, swo.w)) { + // swo is one of the already selected suggestions + // so... update the common-(products)-L(ist) + if (is1stOcc) { + commonL = swo.p; // init list (on 1st occurance) + is1stOcc = false; + } + else { + // caclulate list of common products + // = intersection of (so-far) commonL and swo.p + // commonL = commonL.filter(value => swo.p.includes(value)); + commonL = commonL.filter(function(n) { return swo.p.indexOf(n) !== -1; }); + } + } + else { // if swo is not already selected + // then This is a possible NEXT suggestion + possibleNext.push(swo); + } + }); + + // Now that we have all the possible next suggestions + // we'll match them with the last word of the query + + possibleNext.forEach( poss => { // for tthe possible next suggestions + // if last-word-of-query matches possible word(s) + // and list of word's products has commons with commonL + // then it is a valid next suggestion + chk = check_match(kblast, poss.w, true); + if (chk !== false) { + // check intersection of commonL and suggestion's product-lists + tempL = commonL.filter(value => poss.p.includes(value)); + if (tempL.length > 0) { + results.push({ + w: root +' '+ qAr.join(' ') +' '+ chk, + f: poss.f + }); + // update proList too + proList = proList.concat(tempL); + } + } + }); + // NOTE: test before enable + // return false; // escape from forEach + } + + }); + } + + // calculate unique products + let unique = proList.filter((item, i, ar) => ar.indexOf(item) === i); + // credit: https://stackoverflow.com/questions/11246758/ + + // console.log(q, qAr, qAr.length, proList.length); + + if (unique.length < (_maxResults +1)) { + results = []; + unique.forEach( pr => { + _products.forEach( pi => { + if (pi.id == pr) + results.push(pi); + }) + }); + } + + return results; + } + + // simple, fast search products by numeric code property + // --- + function search_by_code( num ) { + const str = num.toString(); + results = []; + + _products.forEach(p => { + if (results.length > _maxResults) return false; + + if ( (p.bp+'-'+p.bc).indexOf(str) !== -1 ) { + results.push(p) + } + }); + return results; + } + + // suggestions caller (router function) + // arguments: + // * qOrig : original query string + // ** list : callback array structure to host results + // --- + var isuggest = function(qOrig, list) { + var results; + + // if query seems to be some king of 'code/id' + if (qOrig.length>2 && qOrig.match(/^[0-9]+$/) != null) { + results = search_by_code(qOrig); + } + else { + // string match procedure with suggestions engine + results = suggestions_engine(qOrig); + + // depricated: + // if no results request again after removing last (key)word + ////// if (results.length == 0) { + ////// console.log('no results found;', qOrig.split(' ')); + ////// // var qAr = qOrig.trim().split(' '); + ////// // qAr.pop(); // remove last word + ////// // results = suggestions_engine(qAr.join(' ')); + ////// } + } + list(results); + } + + // setup suggestions search/input control + // --- + const $tagsInput = $('#tagsInput') + $tagsInput.typeahead( + { + hint: true, + highlight: true, + minLength: 1 + }, + { + limit: _maxResults, + name: 'kwlinks', + displayKey: 'w', + source: isuggest, + templates: { + suggestion: function(data) { + // console.log(data.w); + if (data.id) + return '<div>'+ data.w + '<span>' + data.bp +'-'+ data.bc + '</span></div>'; + return '<div>'+ data.w +'<span>+</span></div>'; + } + } + } + ) + .bind("typeahead:selected", function(obj, datum, name) { + // console.log(datum); + if (datum.hasOwnProperty('id')) { + // final product selected; do whatever ... + // ex. add to selection list + $('#selections').append('<div>'+ datum.w + '<span>' + datum.id + '</span></div>'); + + // then reset search control + $('.typeahead').typeahead('val','').trigger('blur') + .trigger("query"); + setTimeout(() => { $('.typeahead').focus(); }, _timeout_ms); + + // finaly save tracking info; + $('#selections').append('<div class="-info-">'+ echo_tracking() +'</div>'); + trackSearch.length = 0; // ... and reset info to be ready for nextsearch + } + else { + $('.typeahead').typeahead('val','').trigger('blur'); + $('.typeahead').typeahead('val', datum.w +' ') + .trigger("query"); + // give some time to the engine to calculate results + // then fire focus again... + setTimeout(() => { $('.typeahead').focus(); }, _timeout_ms); + } + trackSearch.push({ + e: 'key', + v: 'Enter', + i: $('#tagsInput').val() + }); + }) + .bind("typeahead:cursorchange", function(obj, data) { + // console.log(obj, data); + // var dt = new Date(); + // console.log('triggered cursorchange /'+dt); + }); + + // TRACK user search attempt /////////////////////////////////////////////// + $('.typeahead').on('keyup', function(e) { + trackSearch.push({ + e: 'key', + v: e.key, + i: $('#tagsInput').val() + }); + }); + +}); + + +// NOTE: +// there is a strong chance that list-intersection and list-concatenation algos +// can be optimized further (for CPU and RAM usage); check the following sources ... +// --- +// https://javascript.plainenglish.io/algorithms-101-includes-vs-indexof-in-javascript-7f1b4af04127 +// https://www.measurethat.net/Benchmarks/Show/8221/0/array-indexof-vs-includes-vs-some +// https://www.measurethat.net/Benchmarks/Show/4223/0/array-concat-vs-spread-operator-vs-push +// HINT: +// --- +// array.some() seems to be much faster than array.includes() and array.indexOf() +// also array.push(list) seems to be an awesome alternative vs concat and Set + + + </script> +</html> + +<!-- + oneliner tests + +totl = 0 +_products.forEach(p => { if (kb_trans(p.w).indexOf(kb_trans("xvris")) !=-1) totl++; }) + +totl = 0 +_products.forEach(p => { if (kb_trans(p.w).indexOf(kb_trans("eisagvghs")) !=-1) totl++; }) + +_products.forEach(p => { if (kb_trans(p.w).indexOf(kb_trans("dvro")) !=-1) totl++; }) +_products.forEach(p => { if (kb_trans(p.w).indexOf(kb_trans("geysh")) !=-1) totl++; }) +_products.forEach(p => { if (kb_trans(p.w).indexOf(kb_trans("xvris prosuhkh zaxarhs")) !=-1) totl++; }) + + +χωρίς +εισαγωγής +δώρο +γεύση +γεύσεις +φέτες +Χωρίς-Γλουτένη +Χωρίς-Ζάχαρη +Χωρίς-Αλάτι +Χωρίς-Λακτόζη +Χωρίς-Συντηρητικά +Χωρίς-Αλκοόλ +Χωρίς-Kαφεϊνη +Χωρίς-Γλυκάνισο +Χωρίς-Ανθρακικό +Υψηλής-Παστερίωσης +Ολες-τις-Χρήσεις +Ολικής-Άλεσης +Ολικής-Aλέσεως +Ολικής +Γαϊδούρας +Γαϊδάρου +Ρούχων +Πιάτων +πλύσεις +Πλυντηρίου +Φύλλων +Γάλακτος +Χρήσης +Τύπου +Ολλανδίας +Απορριμμάτων +Medium +Μαλλιά +Μαλλιών +Γενικής +Plus +Classic +Έκπληξη +Μάνης +Ελάτου +Άγριων +Βοτάνων +Λακωνίας + +--> + +<!-- + +-->
\ No newline at end of file |