Edit File by line

[0] Fix | Delete

<!doctype html>

[1] Fix | Delete

<head>

[2] Fix | Delete

[3] Fix | Delete

<title>Autocomplete - lightweight open-source autocomplete library</title>

[4] Fix | Delete

[5] Fix | Delete

[6] Fix | Delete

[7] Fix | Delete

[8] Fix | Delete

<style>

[9] Fix | Delete

html {

[10] Fix | Delete

height: 100%;

[11] Fix | Delete

box-sizing: border-box;

[12] Fix | Delete

overflow: auto;

[13] Fix | Delete

padding: 0;

[14] Fix | Delete

margin: 0;

[15] Fix | Delete

}

[16] Fix | Delete

[17] Fix | Delete

body {

[18] Fix | Delete

height: 100%;

[19] Fix | Delete

background: linear-gradient(-77deg, transparent 95%, rgba(255, 255, 255, 0.23) 15%),

[20] Fix | Delete

linear-gradient(-77deg, transparent 90%, rgba(255, 255, 255, 0.18) 10%),

[21] Fix | Delete

linear-gradient(-77deg, transparent 85%, rgba(255, 255, 255, 0.1) 10%),

[22] Fix | Delete

#1789c7;

[23] Fix | Delete

background-size: cover;

[24] Fix | Delete

box-sizing: border-box;

[25] Fix | Delete

overflow-x: hidden;

[26] Fix | Delete

overflow-y: auto;

[27] Fix | Delete

padding: 0;

[28] Fix | Delete

margin: 0;

[29] Fix | Delete

font: 14px/18px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

[30] Fix | Delete

}

[31] Fix | Delete

[32] Fix | Delete

body * {

[33] Fix | Delete

font: inherit;

[34] Fix | Delete

max-width: 100%;

[35] Fix | Delete

}

[36] Fix | Delete

[37] Fix | Delete

@media (max-width: 800px) {

[38] Fix | Delete

body {

[39] Fix | Delete

background: #1789c7;

[40] Fix | Delete

padding-left: 20px;

[41] Fix | Delete

padding-right: 20px;

[42] Fix | Delete

}

[43] Fix | Delete

}

[44] Fix | Delete

[45] Fix | Delete

::-webkit-input-placeholder {

[46] Fix | Delete

color: #888;

[47] Fix | Delete

}

[48] Fix | Delete

:-moz-placeholder {

[49] Fix | Delete

color: #888;

[50] Fix | Delete

}

[51] Fix | Delete

::-moz-placeholder {

[52] Fix | Delete

color: #888;

[53] Fix | Delete

}

[54] Fix | Delete

:-ms-input-placeholder {

[55] Fix | Delete

color: #888;

[56] Fix | Delete

}

[57] Fix | Delete

[58] Fix | Delete

input[type="text"] {

[59] Fix | Delete

display: block;

[60] Fix | Delete

float: left;

[61] Fix | Delete

width: 100%;

[62] Fix | Delete

box-sizing: border-box;

[63] Fix | Delete

font: 13px/20px 'Lucida Sans Unicode', sans-serif;

[64] Fix | Delete

color: black;

[65] Fix | Delete

padding: 5px 9px 4px 9px;

[66] Fix | Delete

outline: none;

[67] Fix | Delete

border: 1px solid #2da5da;

[68] Fix | Delete

position: relative;

[69] Fix | Delete

border-radius: 4px;

[70] Fix | Delete

-webkit-appearance: none;

[71] Fix | Delete

}

[72] Fix | Delete

[73] Fix | Delete

input[type="text"]:focus {

[74] Fix | Delete

border-color: #2da5da;

[75] Fix | Delete

}

[76] Fix | Delete

[77] Fix | Delete

body > .main {

[78] Fix | Delete

padding-top: 35px;

[79] Fix | Delete

width: 600px;

[80] Fix | Delete

margin: 0 auto;

[81] Fix | Delete

}

[82] Fix | Delete

[83] Fix | Delete

@media (max-width: 600px) {

[84] Fix | Delete

body > .main {

[85] Fix | Delete

padding-top: 25px;

[86] Fix | Delete

}

[87] Fix | Delete

}

[88] Fix | Delete

[89] Fix | Delete

h1 {

[90] Fix | Delete

font: bold 38px/38px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

[91] Fix | Delete

color: white;

[92] Fix | Delete

padding: 0 0 20px 0;

[93] Fix | Delete

margin: 0;

[94] Fix | Delete

}

[95] Fix | Delete

[96] Fix | Delete

h2 {

[97] Fix | Delete

font: 15px/24px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

[98] Fix | Delete

color: white;

[99] Fix | Delete

padding: 0 0 20px 0;

[100] Fix | Delete

margin: 0;

[101] Fix | Delete

position: relative;

[102] Fix | Delete

top: -20px;

[103] Fix | Delete

}

[104] Fix | Delete

[105] Fix | Delete

@media (max-width: 600px) {

[106] Fix | Delete

h2 {

[107] Fix | Delete

padding-top: 15px;

[108] Fix | Delete

font-size: 14px;

[109] Fix | Delete

line-height: 20px;

[110] Fix | Delete

padding-bottom: 0;

[111] Fix | Delete

}

[112] Fix | Delete

}

[113] Fix | Delete

[114] Fix | Delete

.autocomplete {

[115] Fix | Delete

border-color: #2da5da;

[116] Fix | Delete

border-radius: 4px;

[117] Fix | Delete

}

[118] Fix | Delete

[119] Fix | Delete

.autocomplete > div {

[120] Fix | Delete

padding: 0 9px;

[121] Fix | Delete

font-size: 12px;

[122] Fix | Delete

line-height: 21px;

[123] Fix | Delete

padding-bottom: 2px;

[124] Fix | Delete

}

[125] Fix | Delete

[126] Fix | Delete

.label {

[127] Fix | Delete

color: white;

[128] Fix | Delete

font: 11px/17px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

[129] Fix | Delete

}

[130] Fix | Delete

[131] Fix | Delete

.box {

[132] Fix | Delete

width: 190px;

[133] Fix | Delete

box-sizing: border-box;

[134] Fix | Delete

border: 1px solid rgba(255, 255, 255, 0.8);

[135] Fix | Delete

border-radius: 4px;

[136] Fix | Delete

float: left;

[137] Fix | Delete

margin: 0;

[138] Fix | Delete

padding: 0;

[139] Fix | Delete

background: white;

[140] Fix | Delete

text-align:center;

[141] Fix | Delete

display: table;

[142] Fix | Delete

font-size: 17px;

[143] Fix | Delete

line-height: 26px;

[144] Fix | Delete

box-shadow: rgba(0,0,0,0.3) 0 0 2px;

[145] Fix | Delete

}

[146] Fix | Delete

[147] Fix | Delete

.box > div {

[148] Fix | Delete

display: table-cell;

[149] Fix | Delete

vertical-align: middle;

[150] Fix | Delete

font-size: 14px;

[151] Fix | Delete

}

[152] Fix | Delete

[153] Fix | Delete

@media (max-width: 600px) {

[154] Fix | Delete

.box {

[155] Fix | Delete

color: white;

[156] Fix | Delete

background: none;

[157] Fix | Delete

border: none;

[158] Fix | Delete

text-align: left;

[159] Fix | Delete

box-shadow: none;

[160] Fix | Delete

}

[161] Fix | Delete

.box > div {

[162] Fix | Delete

line-height: 14px;

[163] Fix | Delete

}

[164] Fix | Delete

}

[165] Fix | Delete

[166] Fix | Delete

.text-shadow {

[167] Fix | Delete

text-shadow: 0 1px 1px rgba(0,0,0,0.4)

[168] Fix | Delete

}

[169] Fix | Delete

[170] Fix | Delete

.box + .box {

[171] Fix | Delete

margin-left: 15px;

[172] Fix | Delete

}

[173] Fix | Delete

[174] Fix | Delete

@media (max-width: 600px) {

[175] Fix | Delete

[176] Fix | Delete

.box {

[177] Fix | Delete

width: 100%;

[178] Fix | Delete

}

[179] Fix | Delete

.box + .box {

[180] Fix | Delete

margin-top: 20px;

[181] Fix | Delete

margin-left: 0;

[182] Fix | Delete

}

[183] Fix | Delete

}

[184] Fix | Delete

[185] Fix | Delete

.boxes {

[186] Fix | Delete

margin-top: 20px;

[187] Fix | Delete

}

[188] Fix | Delete

[189] Fix | Delete

.boxes:after {

[190] Fix | Delete

content: '';

[191] Fix | Delete

display: table;

[192] Fix | Delete

clear: both;

[193] Fix | Delete

}

[194] Fix | Delete

[195] Fix | Delete

.boxes + .boxes {

[196] Fix | Delete

margin-top: 18px;

[197] Fix | Delete

}

[198] Fix | Delete

[199] Fix | Delete

.headline {

[200] Fix | Delete

width: 100%;

[201] Fix | Delete

margin: 60px 0 0 0;

[202] Fix | Delete

padding: 0;

[203] Fix | Delete

color: white;

[204] Fix | Delete

font: 18px/30px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

[205] Fix | Delete

border-bottom: 1px dotted white;

[206] Fix | Delete

}

[207] Fix | Delete

[208] Fix | Delete

.headline.links {

[209] Fix | Delete

margin-top: 30px;

[210] Fix | Delete

}

[211] Fix | Delete

[212] Fix | Delete

.link {

[213] Fix | Delete

color: white;

[214] Fix | Delete

text-decoration: none;

[215] Fix | Delete

font: 15px/30px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

[216] Fix | Delete

}

[217] Fix | Delete

[218] Fix | Delete

.link:hover {

[219] Fix | Delete

text-decoration: underline;

[220] Fix | Delete

}

[221] Fix | Delete

[222] Fix | Delete

.link + .link {

[223] Fix | Delete

margin-left: 15px;

[224] Fix | Delete

}

[225] Fix | Delete

[226] Fix | Delete

strong {

[227] Fix | Delete

font-weight: bold!important;

[228] Fix | Delete

}

[229] Fix | Delete

[230] Fix | Delete

@media (max-width: 600px) {

[231] Fix | Delete

.headline + .link {

[232] Fix | Delete

margin-top: 10px;

[233] Fix | Delete

}

[234] Fix | Delete

[235] Fix | Delete

.link {

[236] Fix | Delete

width: 100%;

[237] Fix | Delete

display: block;

[238] Fix | Delete

font-size: 14px;

[239] Fix | Delete

}

[240] Fix | Delete

[241] Fix | Delete

.link + .link {

[242] Fix | Delete

margin-left: 0;

[243] Fix | Delete

}

[244] Fix | Delete

}

[245] Fix | Delete

</style>

[246] Fix | Delete

</head>

[247] Fix | Delete

<body>

[248] Fix | Delete

[249] Fix | Delete

<h1 class="text-shadow">Autocomplete</h1>

[250] Fix | Delete

<h2 class="text-shadow">Blazing fast and lightweight autocomplete library without dependencies. 1KB gzipped.</h2>

[251] Fix | Delete

[252] Fix | Delete

[253] Fix | Delete

[254] Fix | Delete

[255] Fix | Delete

<div class="headline text-shadow">Features</div>

[256] Fix | Delete

[257] Fix | Delete

[258] Fix | Delete

[259] Fix | Delete

<div>

[260] Fix | Delete

Only 1KB gzipped

[261] Fix | Delete

</div>

[262] Fix | Delete

</div>

[263] Fix | Delete

[264] Fix | Delete

[265] Fix | Delete

</div>

[266] Fix | Delete

[267] Fix | Delete

<div>

[268] Fix | Delete

Suggestion Groups

[269] Fix | Delete

</div>

[270] Fix | Delete

</div>

[271] Fix | Delete

</div>

[272] Fix | Delete

[273] Fix | Delete

[274] Fix | Delete

[275] Fix | Delete

<div>

[276] Fix | Delete

Custom Rendering

[277] Fix | Delete

</div>

[278] Fix | Delete

</div>

[279] Fix | Delete

[280] Fix | Delete

<div>

[281] Fix | Delete

Made with Typescript

[282] Fix | Delete

</div>

[283] Fix | Delete

</div>

[284] Fix | Delete

[285] Fix | Delete

<div>Open-Source & Free</div>

[286] Fix | Delete

</div>

[287] Fix | Delete

</div>

[288] Fix | Delete

[289] Fix | Delete

[290] Fix | Delete

[291] Fix | Delete

<div>

[292] Fix | Delete

Debouncing

[293] Fix | Delete

</div>

[294] Fix | Delete

</div>

[295] Fix | Delete

[296] Fix | Delete

<div>

[297] Fix | Delete

No Dependencies

[298] Fix | Delete

</div>

[299] Fix | Delete

</div>

[300] Fix | Delete

[301] Fix | Delete

[302] Fix | Delete

</div>

[303] Fix | Delete

</div>

[304] Fix | Delete

[305] Fix | Delete

[306] Fix | Delete

[307] Fix | Delete

<a class="link" href="https://github.com/kraaden/autocomplete">Getting Started</a>

[308] Fix | Delete

<a class="link" href="https://github.com/kraaden/autocomplete">Download</a>

[309] Fix | Delete

<a class="link" href="https://github.com/kraaden/autocomplete/issues">Issue Tracker</a>

[310] Fix | Delete

<a class="link" href="https://www.npmjs.com/package/autocompleter">NPM Package</a>

[311] Fix | Delete

[312] Fix | Delete

[313] Fix | Delete

</div>

[314] Fix | Delete

[315] Fix | Delete

var countries = ['Afghanistan', 'Albania', 'Algeria', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', 'Bangladesh', 'Belarus', 'Belgium', 'Bolivia', 'Brazil', 'Bulgaria', 'Cameroon', 'Canada', 'Central African Republic', 'Chad', 'Chile', 'China', 'Colombia', 'Denmark', 'Dominica', 'Dominican Republic', 'Ecuador', 'Finland', 'France', 'Georgia', 'Germany', 'Gibraltar', 'Greece', 'Greenland', 'Guadeloupe', 'Guatemala', 'Guyana', 'Haiti', 'Iceland', 'India', 'Indonesia', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jersey', 'Jordan', 'Kazakhstan', 'Kenya', 'Laos', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Mauritius', 'Mayotte', 'Mexico', 'Moldova', 'Norway', 'Palau', 'Paraguay', 'Poland', 'Portugal', 'Romania', 'Saint Helena', 'Saint Pierre and Miquelon', 'South Africa', 'South Georgia', 'South Korea', 'Spain', 'Sweden', 'Swaziland', 'Switzerland', 'United Kingdom', 'United States'];

[316] Fix | Delete

[317] Fix | Delete

var continents = ["Africa", "Europe", "America", "Australia", "Asia", "Antarctica"];

[318] Fix | Delete

var conts = continents.map(function(n) { return { label: n, group: "Continents" }});

[319] Fix | Delete

[320] Fix | Delete

var items = countries.map(function (n) { return { label: n, group: "Countries" }}).concat(conts);

[321] Fix | Delete

var allowedChars = new RegExp(/^[a-zA-Z\s]+$/)

[322] Fix | Delete

[323] Fix | Delete

function charsAllowed(value) {

[324] Fix | Delete

return allowedChars.test(value);

[325] Fix | Delete

}

[326] Fix | Delete

[327] Fix | Delete

autocomplete({

[328] Fix | Delete

input: document.getElementById('testinput'),

[329] Fix | Delete

minLength: 1,

[330] Fix | Delete

onSelect: function (item, inputfield) {

[331] Fix | Delete

inputfield.value = item.label

[332] Fix | Delete

[333] Fix | Delete

fetch: function (text, callback) {

[334] Fix | Delete

var match = text.toLowerCase();

[335] Fix | Delete

callback(items.filter(function(n) { return n.label.toLowerCase().indexOf(match) !== -1; }));

[336] Fix | Delete

[337] Fix | Delete

render: function(item, value) {

[338] Fix | Delete

var itemElement = document.createElement("div");

[339] Fix | Delete

if (charsAllowed(value)) {

[340] Fix | Delete

var regex = new RegExp(value, 'gi');

[341] Fix | Delete

var inner = item.label.replace(regex, function(match) { return "<strong>" + match + "</strong>" });

[342] Fix | Delete

itemElement.innerHTML = inner;

[343] Fix | Delete

} else {

[344] Fix | Delete

itemElement.textContent = item.label;

[345] Fix | Delete

}

[346] Fix | Delete

return itemElement;

[347] Fix | Delete

[348] Fix | Delete

emptyMsg: "No countries found",

[349] Fix | Delete

customize: function(input, inputRect, container, maxHeight) {

[350] Fix | Delete

if (maxHeight < 100) {

[351] Fix | Delete

container.style.top = "";

[352] Fix | Delete

container.style.bottom = (window.innerHeight - inputRect.bottom + input.offsetHeight) + "px";

[353] Fix | Delete

container.style.maxHeight = "140px";

[354] Fix | Delete

}

[355] Fix | Delete

}

[356] Fix | Delete

})

[357] Fix | Delete

[358] Fix | Delete

document.querySelector("input").focus();

[359] Fix | Delete

</script>

[360] Fix | Delete

</body>

[361] Fix | Delete

[362] Fix | Delete