Intelligent Contextual Autocomplete
Autocomplete/typeahead capable input element with a dropdown list. Search suggestions are selected from a dataset context by an intelligent analysis and smart sorting algorithm.JavaScript, HTML, CSS Download (8.2KB): autocomplete.min.jsAbout
The intelligent analysis and smart sorting engine provides typeahead suggestions based on a word's appearance frequency, position in a sentence, already typed text and other techniques. The algorithm is capable of handling datasets of up to 90,000 entries with an average per keystroke execution speed being 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; */
/*} */