How can I speed up this filter method?

Question

I have very large array of string and I want to filter it fast with my filter method it took minimum 7 second. Even it can hang my cursor for 7 second.

My method

    public query = ''; 
    public countries = []; // this is my large array 
    public filteredList = [];

    filter() {
    if (this.query !== ""){
        this.filteredList = this.countries.filter(function(el){
            return el.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
        }.bind(this));
    }else{
        this.filteredList = [];
    }
}

Can this be sped up?

Answer 1

My attempt, not tested... don't have the data, perhaps not the cleanest code but i tried putting in all the performance stuff i could think of... reducing the # of [dot]something lookups and what not...

filter() {  
  if (this.query !== '') {

    const originalArr = this.countries

    // Maybe store this somewhere if you are running this function in
    // some search + autocomplete.
    // running lowercase once and rebuild the array might be faster
    // might be risky if the array entries can contain ',' but you can change it 
    const countries = originalArr.join().toLowerCase().split(',')



    const lq = this.query.toLowerCase() // Don't re-calculate this every time.
    const length = countries.length
    const filtered = []

    for (let i = 0; i < length; i++) {
      if (countries[i].indexOf(lq) > -1)
        filtered.push(originalArr[i])
    }

    this.filteredList = filtered
  } else {
    this.filteredList = []
  }

  this.filteredList = []
}

Answer 2

Here is something for people to play around with:

Created strings from http://www.lipsum.com/
Generated 150 paragraphs, 13399 words, 90569 bytes of Lorem Ipsum
(Stackoverflow is limited to 30000 characters)

Converted strings into array items with this:
http://erebaltor.se/rickard/generatorer/createList.html

I would suggest to use chrome and decrease CPU speed in the console.

var countries = [];

countries[0] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit";
countries[1] = "Mauris vitae neque ut est sagittis efficitur";
countries[2] = "Donec vel metus eu ex pellentesque imperdiet";
countries[3] = "Curabitur molestie felis vel sagittis pellentesque";
countries[4] = "Suspendisse sollicitudin ligula eu ligula sollicitudin, non tristique nisl sodales";
countries[5] = "Aliquam pulvinar aliquam vulputate";
countries[6] = "Fusce enim arcu, suscipit ac auctor quis, maximus eu velit";
countries[7] = "Nunc vel felis nec nibh pulvinar egestas id sed orci.";
countries[8] = "Interdum et malesuada fames ac ante ipsum primis in faucibus";
countries[9] = "Integer dictum venenatis posuere";
countries[10] = "Cras feugiat, leo eget pretium consectetur, eros urna elementum lectus, vitae venenatis libero tellus at lectus";
countries[11] = "Quisque sagittis cursus ante eget iaculis";
countries[12] = "Sed aliquet sapien nisl, ornare placerat nulla ultrices id";
countries[13] = "Vivamus suscipit felis vitae lorem fermentum sodales";
countries[14] = "Integer finibus nulla finibus, ultricies elit a, ornare ex";
countries[15] = "Etiam sed sem turpis";
countries[16] = "Suspendisse consequat augue ut turpis viverra, sed maximus ex vulputate";
countries[17] = "Vestibulum ullamcorper nunc ac nibh ullamcorper, eget porttitor lorem lobortis";
countries[18] = "Etiam pretium id ex quis dictum";
countries[19] = "Integer scelerisque, justo eu vulputate facilisis, nisl dolor auctor dolor, eu porta sem odio at elit";
countries[20] = "Proin semper erat metus, molestie auctor enim condimentum sit amet.";
countries[21] = "Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus";
countries[22] = "Sed ornare ligula tincidunt eros accumsan, a dictum ante facilisis";
countries[23] = "Praesent tempor fermentum lectus, vitae consequat lectus lobortis eget";
countries[24] = "Pellentesque vel fermentum justo";
countries[25] = "Sed rhoncus quis purus sed porttitor";
countries[26] = "Morbi quis quam a est suscipit pellentesque";
countries[27] = "Proin sagittis interdum bibendum";
countries[28] = "Curabitur suscipit ante quam, in lobortis ipsum cursus eu";
countries[29] = "Nam et dui est";
countries[30] = "Maecenas laoreet lacus scelerisque, interdum nibh sit amet, pulvinar metus";
countries[31] = "Mauris vel consectetur quam.";
countries[32] = "Cras pretium nulla ipsum, id semper velit consectetur sed";
countries[33] = "Quisque sed arcu sed libero vulputate egestas at eu quam";
countries[34] = "Curabitur facilisis, nunc ac aliquet volutpat, arcu orci dignissim tellus, scelerisque laoreet sapien ex id sem";
countries[35] = "In hac habitasse platea dictumst";
countries[36] = "Fusce vel neque vel velit mattis pharetra non ut lorem";
countries[37] = "Duis fermentum metus in iaculis vestibulum";
countries[38] = "Suspendisse non neque eleifend, consectetur nulla ut, accumsan lorem";
countries[39] = "In quis est et arcu iaculis fringilla";
countries[40] = "Aliquam suscipit arcu vitae aliquet malesuada";
countries[41] = "Proin tincidunt ultrices augue";
countries[42] = "Curabitur vel hendrerit lacus";
countries[43] = "Morbi euismod neque a est dignissim consectetur";
countries[44] = "Cras vitae risus metus";
countries[45] = "Donec condimentum ante ante, ut sollicitudin neque finibus ut.";
countries[46] = "Maecenas ac rutrum justo, a rhoncus ex";
countries[47] = "Nullam iaculis a elit et ornare";
countries[48] = "Nulla facilisi";
countries[49] = "Fusce eu imperdiet ipsum";
countries[50] = "Suspendisse maximus augue vitae ultrices rhoncus";
countries[51] = "Maecenas mollis libero vel ipsum consequat suscipit";
countries[52] = "Pellentesque vitae ipsum et ligula luctus dictum";
countries[53] = "Integer egestas eu nibh id iaculis";
countries[54] = "Morbi vehicula placerat purus non tincidunt";
countries[55] = "Lorem ipsum dolor sit amet, consectetur adipiscing elit";
countries[56] = "Integer et fermentum mauris";
countries[57] = "Mauris tincidunt ex id velit vulputate, vel tempor lectus eleifend";
countries[58] = "Maecenas dignissim leo in ipsum auctor porta.";
countries[59] = "Quisque dui risus, fringilla sed hendrerit consectetur, venenatis fringilla libero";
countries[60] = "Mauris dignissim leo augue";
countries[61] = "Vestibulum dapibus velit vel justo placerat sollicitudin";
countries[62] = "Suspendisse aliquet purus at lacus luctus hendrerit";
countries[63] = "Donec et metus a est convallis accumsan";
countries[64] = "Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus";
countries[65] = "Nunc fringilla tortor velit, vel placerat tellus dictum ut";
countries[66] = "Sed consequat commodo ligula eget pharetra";
countries[67] = "Nullam vestibulum mi massa, posuere imperdiet lorem bibendum nec";
countries[68] = "Nunc consequat est a blandit ornare";
countries[69] = "Integer et rutrum libero";
countries[70] = "Curabitur vulputate quam non tellus pulvinar aliquam";
countries[71] = "Quisque feugiat urna in est elementum, vel pulvinar tortor commodo.";
countries[72] = "Ut pulvinar quis nulla id faucibus";
countries[73] = "Curabitur eget erat sed tellus laoreet suscipit";
countries[74] = "Ut congue in ligula ut porta";
countries[75] = "Nunc convallis justo dapibus risus ornare sagittis a ullamcorper ligula";
countries[76] = "Vestibulum eu ligula quis mi iaculis placerat a non lectus";
countries[77] = "Nam mi sapien, tristique eget odio maximus, condimentum cursus sapien";
countries[78] = "Vivamus lobortis dolor quis est aliquam, rutrum feugiat nibh porttitor";
countries[79] = "Cras sed tellus risus";
countries[80] = "Suspendisse pellentesque, augue et tristique ornare, augue orci facilisis quam, elementum pellentesque ipsum velit sit amet dui.";
countries[81] = "In et imperdiet metus";
countries[82] = "Etiam dignissim dolor quis lectus imperdiet, ac semper purus vehicula";
countries[83] = "Cras varius auctor velit ut gravida";
countries[84] = "Duis vel dui mi";
countries[85] = "Fusce vehicula tincidunt odio eget malesuada";
countries[86] = "Aliquam eu diam eu metus molestie iaculis";
countries[87] = "Nam consequat sodales lectus sed scelerisque";
countries[88] = "Suspendisse a tellus bibendum, facilisis sapien sed, tempor lectus";
countries[89] = "Nunc elit lacus, eleifend ut convallis in, fermentum nec nunc";
countries[90] = "Maecenas vitae lectus dictum, eleifend ante sed, fringilla lorem.";
countries[91] = "Vivamus non eros sem";
countries[92] = "Suspendisse erat diam, sollicitudin quis fermentum et, cursus a mi";
countries[93] = "Proin eget lorem eu mauris volutpat placerat non vitae nisl";
countries[94] = "In hac habitasse platea dictumst";
countries[95] = "Nunc eget sem quis massa tincidunt sagittis eu nec lorem";
countries[96] = "Suspendisse ante dolor, condimentum vitae risus sed, convallis pulvinar eros";
countries[97] = "Integer id tempor massa, in semper magna";
countries[98] = "Nullam augue velit, viverra pharetra elit egestas, vestibulum molestie sem";
countries[99] = "Donec sed nibh viverra, porttitor libero at, tincidunt mauris";
countries[100] = "Donec dignissim odio ac ipsum rutrum scelerisque a eget libero";
countries[101] = "Maecenas dictum leo et justo sollicitudin, sit amet tristique dolor euismod";
countries[102] = "Etiam in ex sit amet felis maximus tristique ac aliquet sem.";
countries[103] = "In ornare elementum ultricies";
countries[104] = "Proin rhoncus, diam id finibus facilisis, risus arcu pellentesque ipsum, a feugiat eros mauris at justo";
countries[105] = "Nulla ultricies nunc et erat pellentesque rhoncus";
countries[106] = "Pellentesque commodo lectus nulla, euismod finibus eros iaculis in";
countries[107] = "Nullam sit amet massa tempor, euismod nisi quis, efficitur urna";
countries[108] = "Suspendisse ex mauris, euismod ac erat eu, volutpat vehicula velit";
countries[109] = "Ut velit turpis, porttitor ut felis accumsan, vehicula porttitor orci";
countries[110] = "Nulla vestibulum leo odio, vitae scelerisque dolor fermentum sit amet.";
countries[111] = "Proin vitae odio auctor, placerat sapien eget, consectetur elit";
countries[112] = "Donec quis fermentum enim";
countries[113] = "Donec pharetra ante id dolor ullamcorper, nec luctus magna ullamcorper";
countries[114] = "Duis volutpat velit in lacus tincidunt tempor";
countries[115] = "Suspendisse pretium pretium rutrum";
countries[116] = "Sed in tincidunt neque";
countries[117] = "Pellentesque et pellentesque arcu, sit amet varius enim";
countries[118] = "Ut diam neque, ultricies nec ex a, convallis cursus purus";
countries[119] = "Pellentesque a libero risus";
countries[120] = "Curabitur condimentum, magna ut egestas rhoncus, purus mauris commodo tortor, a mattis arcu odio vel risus";
countries[121] = "Integer nisl felis, volutpat ut gravida sed, dapibus a orci";
countries[122] = "Vivamus eu tempus lorem, et interdum turpis";
countries[123] = "Nam eget lectus non turpis tempus blandit";
countries[124] = "Suspendisse eu vestibulum nisl";
countries[125] = "Mauris sed nulla suscipit, viverra neque ut, aliquam ipsum.";
countries[126] = "Etiam enim sapien, venenatis ut dapibus a, mattis ac metus";
countries[127] = "Vestibulum et magna non ipsum gravida molestie a consectetur purus";
countries[128] = "Donec volutpat sodales bibendum";
countries[129] = "Morbi ac diam eu sapien lacinia pellentesque id et enim";
countries[130] = "Aliquam mollis metus sit amet mauris tristique, tincidunt blandit eros faucibus";
countries[131] = "Praesent et felis a urna rhoncus interdum id at ex";
countries[132] = "Aenean dignissim metus elit, quis pretium nisi pretium et";
countries[133] = "Aliquam et odio nisi";
countries[134] = "Mauris aliquam, felis eu pretium finibus, orci lorem malesuada lacus, id dignissim tortor magna aliquet nibh";
countries[135] = "Cras interdum eget mauris lobortis suscipit";
countries[136] = "Maecenas in tristique purus, a aliquet elit";
countries[137] = "Sed mollis ligula vitae elementum venenatis";
countries[138] = "Suspendisse mattis neque non sem porttitor gravida";
countries[139] = "Aliquam sit amet ante maximus, sagittis odio a, pulvinar lorem";
countries[140] = "In pulvinar pharetra tellus vitae tincidunt.";
countries[141] = "Morbi sed eleifend neque, ut lobortis nunc";
countries[142] = "Sed viverra enim ac viverra tincidunt";
countries[143] = "Pellentesque sodales tortor orci, ac pellentesque est molestie vel";
countries[144] = "Praesent tempus luctus ligula, eget condimentum diam consequat eget";
countries[145] = "In gravida justo diam, id consequat est accumsan at";
countries[146] = "Sed lacinia lobortis ipsum a viverra";
countries[147] = "Curabitur vitae condimentum risus";
countries[148] = "Proin consectetur lobortis arcu, et volutpat felis tempor sed";
countries[149] = "Duis at condimentum ligula, ac facilisis lacus";
countries[150] = "Ut magna tellus, tincidunt eget eleifend quis, efficitur id metus";
countries[151] = "Nullam bibendum augue nec orci dapibus porta";
countries[152] = "Nulla sem tortor, feugiat at nisi sit amet, gravida imperdiet arcu";
countries[153] = "Curabitur mattis, ante in finibus ultricies, nibh lectus imperdiet leo, vel malesuada libero ligula in erat";
countries[154] = "Etiam molestie leo vel eros convallis mattis";
countries[155] = "Nam at dui id nisl tristique interdum quis vitae tortor";
countries[156] = "Fusce vitae lectus id augue volutpat vulputate eu sit amet ligula.";
countries[157] = "Aenean eleifend posuere ex et posuere";
countries[158] = "Curabitur sollicitudin ex ac eros ultrices, quis tincidunt lacus ultricies";
countries[159] = "Ut ac luctus quam";
countries[160] = "Mauris condimentum gravida neque, non pharetra lectus lobortis luctus";
countries[161] = "Quisque nec nunc iaculis, interdum justo at, tempus turpis";
countries[162] = "Cras eget rhoncus arcu, eu viverra leo";
countries[163] = "Vestibulum ut orci nec augue venenatis tristique eget in arcu";
countries[164] = "Duis venenatis enim massa, nec aliquam mauris fermentum vitae";
countries[165] = "Nam molestie convallis nulla, nec accumsan erat rhoncus a.";
countries[166] = "Donec sagittis et nisl quis fringilla";
countries[167] = "Quisque finibus a massa ut lacinia";
countries[168] = "In eu velit fringilla, posuere neque sit amet, imperdiet quam";
countries[169] = "Etiam id quam pretium, mattis sem ac, consectetur purus";
countries[170] = "Praesent pulvinar scelerisque tortor sit amet aliquet";
countries[171] = "Nulla lacinia orci purus, sed efficitur nunc varius ut";
countries[172] = "Vivamus nisi lorem, imperdiet dapibus lorem in, vestibulum feugiat neque";
countries[173] = "Vivamus ornare vehicula lectus, sed scelerisque nunc finibus eget.";
countries[174] = "Nulla facilisi";
countries[175] = "Integer leo lacus, tempus id consectetur vel, fermentum in magna";
countries[176] = "Mauris consectetur purus vitae turpis fringilla elementum";
countries[177] = "Integer id diam nisi";
countries[178] = "Curabitur lacus tortor, facilisis vel turpis in, ornare dignissim tortor";
countries[179] = "Maecenas a ligula sapien";
countries[180] = "Morbi laoreet arcu et tellus placerat, nec posuere augue viverra";
countries[181] = "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas";
countries[182] = "Vivamus euismod feugiat ex, in condimentum est sagittis in";
countries[183] = "Pellentesque nisi risus, vulputate ac fermentum ac, hendrerit ac mi";
countries[184] = "Curabitur non nulla sit amet dolor ornare commodo";
countries[185] = "Praesent vestibulum in erat eget laoreet";
countries[186] = "Nunc elementum ex ut magna gravida ullamcorper";
countries[187] = "Nullam pharetra sed neque non porta";
countries[188] = "Mauris suscipit libero justo, sit amet mollis diam pharetra ac.";
countries[189] = "Nullam eget blandit lectus, nec ullamcorper erat";
countries[190] = "Integer ac purus elit";
countries[191] = "Maecenas dignissim risus sagittis quam ornare, non consequat metus congue";
countries[192] = "Nulla facilisi";
countries[193] = "Proin dignissim mattis eros, eu blandit risus elementum imperdiet";
countries[194] = "Curabitur eget nisi enim";
countries[195] = "Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus";
countries[196] = "Nulla rutrum vehicula ornare";
countries[197] = "Interdum et malesuada fames ac ante ipsum primis in faucibus";
countries[198] = "Nunc ultrices id sem luctus lobortis.";
countries[199] = "Aliquam erat volutpat";
countries[200] = "Curabitur venenatis odio nec odio eleifend aliquet";
countries[201] = "Donec finibus lorem sed ex vehicula auctor";
countries[202] = "Vivamus vestibulum imperdiet nisl, et pretium ligula varius eget";
countries[203] = "Proin et lacus in orci commodo porta";
countries[204] = "Sed hendrerit mi at ultricies pretium";
countries[205] = "Etiam nec fringilla elit";
countries[206] = "Sed venenatis dignissim nisl id aliquam";
countries[207] = "Morbi suscipit dolor sed rhoncus auctor";
countries[208] = "Nulla eget neque viverra, volutpat ex eu, volutpat dolor";
countries[209] = "Maecenas vulputate viverra lacus et pharetra";
countries[210] = "Curabitur sodales feugiat nisi nec facilisis";
countries[211] = "Quisque euismod nisl a lectus gravida mattis";
countries[212] = "Praesent at sapien id lectus dictum vestibulum.";
countries[213] = "Mauris facilisis finibus est, et gravida lacus dignissim malesuada";
countries[214] = "Sed eleifend nibh eget lacus dignissim imperdiet";
countries[215] = "Maecenas a sem interdum, porta augue a, laoreet felis";
countries[216] = "Cras rhoncus, lectus vel porttitor facilisis, ex nunc egestas felis, elementum commodo velit urna et sem";
countries[217] = "In hac habitasse platea dictumst";
countries[218] = "Integer facilisis viverra velit ac maximus";
countries[219] = "Praesent tempor elementum ante, ac iaculis est aliquam et";
countries[220] = "Nam eu eros finibus, lacinia mi ac, fringilla velit.";
countries[221] = "Fusce molestie rhoncus nisi finibus ornare";
countries[222] = "Curabitur laoreet diam sit amet nisi ultricies, eget lobortis mauris elementum";
countries[223] = "Integer facilisis fermentum tincidunt";
countries[224] = "Etiam dapibus odio dui, eget pulvinar sapien vestibulum sit amet";
countries[225] = "Morbi dapibus velit bibendum dui efficitur dignissim";
countries[226] = "Donec eget orci cursus, tincidunt arcu non, accumsan tortor";
countries[227] = "Maecenas vitae nisl lobortis, pharetra neque non, venenatis elit.";
countries[228] = "Sed vitae arcu congue tortor blandit pulvinar eget at arcu";
countries[229] = "Donec id accumsan nulla";
countries[230] = "Vestibulum euismod id dui vitae congue";
countries[231] = "In vehicula at erat vel malesuada";
countries[232] = "Proin sodales ultrices lacus, vitae egestas turpis egestas et";
countries[233] = "Cras bibendum dui et velit gravida, vitae scelerisque tortor feugiat";
countries[234] = "Praesent vel tortor a mauris viverra pretium";
countries[235] = "In sed ipsum purus.";
countries[236] = "Donec sed metus ante";
countries[237] = "Praesent nibh ex, ultricies ac tristique eu, tempus quis lorem";
countries[238] = "Curabitur gravida dui est, id malesuada felis tincidunt et";
countries[239] = "Etiam in consequat lorem";
countries[240] = "Vivamus elementum convallis pharetra";
countries[241] = "Aenean eu erat eu arcu varius pharetra ac a tellus";
countries[242] = "Suspendisse potenti";
countries[243] = "Suspendisse pellentesque dui velit, vitae mollis erat vestibulum id";
countries[244] = "Nam bibendum, ipsum in tempor accumsan, quam dolor sodales leo, nec posuere enim sapien in orci";
countries[245] = "Quisque felis eros, tempus non auctor sit amet, pretium sed enim.";
countries[246] = "Praesent nec magna eros";
countries[247] = "Ut porta hendrerit augue, et ullamcorper magna tincidunt a";
countries[248] = "Sed id nibh neque";
countries[249] = "Ut convallis tortor et auctor mollis";
countries[250] = "Integer auctor magna et ipsum commodo varius";
countries[251] = "Integer a mattis dui";
countries[252] = "Vivamus id arcu commodo, sagittis arcu non, condimentum dui";
countries[253] = "Maecenas dignissim, turpis non interdum imperdiet, sapien nibh mattis metus, at luctus odio purus et eros";
countries[254] = "Nunc a mollis augue";
countries[255] = "Sed quis feugiat dolor";
countries[256] = "Sed laoreet vitae magna ullamcorper dapibus";
countries[257] = "In efficitur sapien turpis, a accumsan elit volutpat eget";
countries[258] = "In eu mi eget tellus dignissim volutpat sit amet placerat augue";
countries[259] = "Aenean interdum nisi eu consequat vulputate";
countries[260] = "Integer ac nisl libero";
countries[261] = "Mauris sit amet porttitor eros.";
countries[262] = "Mauris sagittis massa sit amet orci vehicula malesuada";
countries[263] = "Nunc consequat placerat blandit";
countries[264] = "Ut massa tortor, gravida sed nunc id, vehicula porta tellus";
countries[265] = "Suspendisse et tortor arcu";
countries[266] = "Aliquam quis accumsan lacus";
countries[267] = "Pellentesque consectetur lobortis libero";
countries[268] = "Etiam efficitur est molestie massa dapibus pellentesque";
countries[269] = "Vestibulum interdum blandit odio ac varius";
countries[270] = "Curabitur ut justo semper, suscipit nisl vitae, placerat est";
countries[271] = "Nam laoreet sem a magna pharetra, id pharetra nisi vehicula";
countries[272] = "Nam fringilla ornare eros at condimentum";
countries[273] = "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas";
countries[274] = "Proin id consequat lorem, sed viverra leo";
countries[275] = "Suspendisse dictum lacus ac sollicitudin sagittis";
countries[276] = "Vestibulum molestie facilisis enim id rhoncus";
countries[277] = "Aenean sed felis ligula.";
countries[278] = "Phasellus congue ante arcu, quis maximus nisi lobortis eget";
countries[279] = "Suspendisse at aliquet nibh";
countries[280] = "Vivamus tempor at nisi ac gravida";
countries[281] = "Nunc risus neque, tempus vel convallis mollis, faucibus a augue";
countries[282] = "Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos";
countries[283] = "Vivamus nec nibh vel lectus posuere rhoncus vitae at quam";
countries[284] = "Pellentesque vulputate feugiat ex vitae fringilla";
countries[285] = "Ut pretium condimentum sem";
countries[286] = "Nulla facilisi";
countries[287] = "Vestibulum diam velit, tincidunt sed suscipit eu, vehicula aliquam enim";
countries[288] = "Etiam fermentum gravida libero vitae iaculis";
countries[289] = "Curabitur ullamcorper cursus est quis mollis";
countries[290] = "Cras non justo ac nisi commodo blandit cursus facilisis nulla";
countries[291] = "Etiam posuere tempus rutrum";
countries[292] = "Sed porttitor eu leo et eleifend.";
countries[293] = "Phasellus id ipsum ullamcorper, tincidunt ipsum faucibus, vestibulum justo";
countries[294] = "Morbi ac purus tincidunt, bibendum quam nec, dapibus felis";
countries[295] = "Praesent fringilla dictum commodo";
countries[296] = "Phasellus ut convallis elit, non aliquam diam";
countries[297] = "Praesent fringilla luctus felis, in ornare leo gravida a";
countries[298] = "Suspendisse id dui a dui interdum egestas";
countries[299] = "Phasellus rutrum, purus nec posuere semper, nisi eros condimentum enim, quis suscipit quam lorem ac neque";
countries[300] = "Mauris facilisis, neque non vehicula eleifend, est ligula ullamcorper lectus, eu convallis diam augue vitae nulla";
countries[301] = "Praesent blandit turpis vel augue sagittis rutrum";
countries[302] = "Nulla a laoreet ligula";
countries[303] = "Fusce iaculis magna quis ante accumsan, vel lobortis dolor vulputate";
countries[304] = "Curabitur mollis eget dui vel tempor";
countries[305] = "Vestibulum placerat ultricies nunc, blandit bibendum arcu ultricies id";
countries[306] = "Integer sit amet egestas nisl, vel gravida justo.";
countries[307] = "Sed at varius nisi";
countries[308] = "Phasellus sit amet purus in odio bibendum ultrices in a turpis";
countries[309] = "Maecenas sollicitudin posuere sapien vel semper";
countries[310] = "Maecenas vitae nunc rhoncus, placerat orci sit amet, porttitor urna";
countries[311] = "Maecenas feugiat nibh est, porttitor sagittis erat commodo vitae";
countries[312] = "Proin tincidunt eget risus at ultrices";
countries[313] = "Vestibulum interdum mi vel massa aliquam elementum";
countries[314] = "Donec et tellus id elit pretium ultricies a ac nunc";
countries[315] = "Ut elementum risus eu eleifend suscipit";
countries[316] = "Vivamus convallis mi pretium urna efficitur, nec aliquet lorem tristique";
countries[317] = "Donec ac metus erat";
countries[318] = "Donec eget tempus ipsum, in tempor purus";
countries[319] = "Phasellus lobortis eu nulla vitae varius";
countries[320] = "Ut luctus tempus varius";
countries[321] = "Donec commodo, ante ut facilisis bibendum, quam urna faucibus justo, ac cursus sapien lorem id nunc";
countries[322] = "Curabitur vitae pharetra ligula, eu ornare leo.";
countries[323] = "Sed condimentum et neque eu congue";
countries[324] = "Fusce sem dui, consectetur et pharetra nec, tempus eget quam";
countries[325] = "Fusce fermentum justo sem, et suscipit augue aliquet a";
countries[326] = "Suspendisse in felis nec ipsum placerat fermentum at sit amet magna";
countries[327] = "In vulputate ligula tortor, vitae cursus erat convallis eget";
countries[328] = "Phasellus interdum erat in lectus dapibus, ut aliquam tellus eleifend";
countries[329] = "Etiam finibus ante eu felis aliquam, at dapibus ante consectetur";
countries[330] = "Proin dui ipsum, vehicula et feugiat eget, dignissim ac lectus";
countries[331] = "Nam ut pellentesque lectus";
countries[332] = "Nulla nunc velit, convallis posuere diam ut, suscipit imperdiet metus.";
countries[333] = "Nunc in leo nec mi ultrices mattis vitae rhoncus felis";
countries[334] = "Suspendisse potenti";
countries[335] = "Suspendisse id porta arcu";
countries[336] = "Donec sed nibh non mi eleifend porta";
countries[337] = "In vulputate fringilla nisl, blandit faucibus ligula volutpat sit amet";
countries[338] = "Aenean consequat commodo sapien, pulvinar posuere lectus efficitur eu";
countries[339] = "Phasellus elementum neque nec tristique faucibus";
countries[340] = "Quisque vitae arcu quis enim tristique vestibulum";
countries[341] = "In sed ex augue.";
countries[342] = "Sed vulputate sed turpis non porttitor";
countries[343] = "Maecenas commodo condimentum arcu ultricies accumsan";
countries[344] = "Phasellus et tristique metus, a volutpat nunc";
countries[345] = "Aliquam est felis, posuere quis ante id, rhoncus imperdiet lorem";
countries[346] = "Phasellus sapien magna, gravida eu pulvinar vel, bibendum nec est";
countries[347] = "Etiam ornare, ligula vel fringilla placerat, turpis lacus aliquet eros, sit amet pellentesque tellus tortor vitae libero";
countries[348] = "Aenean venenatis erat lectus, eu semper massa porttitor in";
countries[349] = "Sed vel nulla ipsum";
countries[350] = "Proin id tellus rhoncus, ultrices enim eu, tincidunt ipsum";

var filteredList = [];
var answerElement = document.getElementById("answer");
var timeElement = document.getElementById("time");
var startTime = 0;

function searchString(query) {
  filteredList = [];
  
  startTime = new Date().getTime();
  
  if (query !== '') {
    const lq = query.toLowerCase();

    for (var i = 0; i < countries .length; i++) {
      if (countries[i].toLowerCase().indexOf(lq) > -1)
        filteredList.push(countries[i]);
    }
  }
  
  timeElement.innerHTML = new Date().getTime() - startTime + ' milliseconds';

  answerElement.innerHTML = '<p>' + filteredList.join('</p><p>') + '</p>';
}

<input type="text" onkeyup="searchString(this.value)"/>

<p id="time">Type in input above</p>

<div id="answer"></div>

Answer 3

Not sure if this is relevant in client side. But have you tried using datalist? if so, then it will all be native, case insensitive and also look at the hole string, searching for far will match Safari

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Answer 4

There are a couple of changes you can make that should help:

public query = ''; 
public countries = []; // this is my large array 
public filteredList = [];

filter() {
    if (this.query !== ""){
    const lq = this.query.toLowerCase(); // Don't re-calculate this every time.

        this.filteredList = this.countries.filter(function(el){
            return el.toLowerCase().indexOf(lq) > -1;
        });  
        // ^ The `bind` can be removed, since you're no longer using `this` here.
    }else{
        this.filteredList = [];
    }
}

If you want to go all-out, you can switch the .filter for a loop:

public query = ''; 
public countries = []; // this is my large array 
public filteredList = [];

filter() {
    this.filteredList = [];

    if (this.query !== ""){
        const lq = this.query.toLowerCase(); // Don't re-calculate this every time.

        for (var i = 0; i < countries .length; i++) {
            if (countries[i].toLowerCase().indexOf(lq) > -1)
                this.filteredList.push(countries[i])
        }
    }
}