如何加快这种过滤方法？

Question

我有非常大的字符串数组，我想用我的过滤器方法快速过滤它，至少花费了7秒。 即使它可以将我的光标挂起7秒钟。

我的方法

    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 = [];
    }
}

可以加快速度吗？

Answer 1

您可以进行一些更改，这些更改应该会有所帮助：

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 = [];
    }
}

如果要全力以赴，可以将.filter切换为循环：

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])
        }
    }
}

Answer 2

我的尝试，未经测试，没有数据，也许不是最干净的代码，但是我尝试放入所有我能想到的性能内容……减少了[dot]something查找的数量，什么也没有。 。

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 3

不知道这是否与客户端有关。 但是您是否尝试过使用数据列表 ？ 如果是这样，那么它将全部是本机的，不区分大小写，并且还会查看孔字符串，搜索far将与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

这是人们可以玩的东西：

从http://www.lipsum.com/创建的字符串
生成150个段落，13399个单词，90569字节的Lorem Ipsum
（Stackoverflow限制为30000个字符）

使用以下命令将字符串转换为数组项：
http://erebaltor.se/rickard/generatorer/createList.html

我建议使用chrome并降低控制台的CPU速度。

 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>