Intelligent Contextual Autocomplete | srgdev.com

Intelligent Contextual Autocomplete

Google like typeahead input box with a dropdown list. Search suggestions are selected from the dataset context by intelligent analysis and smart sorting algorithm.JavaScript, HTML, CSS Download (8.2KB): autocomplete.min.js

About

The Intelligent analysis and smart sorting engine provides suggestions based on the word's appearance frequency, position in the sentence, already typed text and other techniques. The algorithm is capable of handling datasets of up to 60,000 entries with an average per keystroke execution speed under 15ms (.0015s), which is 8 times faster than a very skilled typist's per keystroke time of about 120ms (60 seconds / 100 words-per-minute * 5 chars-per-word-average). In order to provide better performance and suggestion accuracy, data is internally indexed and normalized, some common words (similar to MySQL stop-words) are discarded. This behavior can be fine-tuned by providing a custom "discard" list.

Demo

This demo loads around 54,000 newspaper article titles from year 2015 (2.3Mb raw data array). The original dataset, AG News, can be found on the Academic Torrents website.

HTML / JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html> <html> <head> <script src="/path/to/autocomplete.min.js"></script> <script> var acs window.onload = function() { acs = new autoCS("cs_input","cs_dropdown",12,dataArray,scValueSet) acs.start() } /** * Called when the input's value is set via "Enter" or "Click" from the dropdown box. * @param {string} v - value */ function scValueSet(v) { if (v==="") return document.getElementById("cs_form").submit() } </script> </head> <body"> ... <form id="cs_form" action="/backend.php"> <div> <input id="cs_input" autocomplete="off"> <div id="cs_dropdown" class="csHideDDBox"></div> </div> </form> ... </body> </html>

Parameters

/**
 * @constructor
 * @param {string} inputId - Input Element ID (first param)
 * @param {string} ddBoxId - Dropdown box ID (second param)
 * @param {number} maxShow - Maximum number of entries to show in the dropdown box (third param)
 * @param {string[]} data  - Data array (fourth param)
 * @param {function} sf    - function to call onSubmit, must have one parameter - value (fifth param)
 */
var autoCS=function(inputId,ddBoxId,maxShow,data,sf){
  ...
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* --- CONTAINER (input and dropdown parent) --- */ /* This class is added to the container element on input focus (removed on blur) */ .csInputFocus{ -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.25); box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.25); } /* --- DROPDOWN BOX --- */ /* This class is appended to the dropdown box when it is HIDDEN */ .csHideDDBox{ display: none; } /* This class is appended to the dropdown box when it is SHOWN */ .csShowDDBox{ display: block; } /* --- DROPDOWN BOX's "ROWs" (DIVs) --- */ /* Since dropdown box's "rows" are "recycled" this class is for the HIDDEN rows */ .csHideDDRow{ display: none; } /* Since dropdown box's "rows" are "recycled" this class is for VISIBLE rows */ .csShowDDRow{ display: block; } /* Class for the highlighted/selected row*/ .csSelDDRow{ background: #dfdfdf; } /* This can be used to style the bold text in the "row" */ /*.csShowDDRow>b{ */ /* color:red; */ /*} */