当前位置: 首页 > Web前端 > vue.js

只需一步,让你的搜索框更智能

时间:2023-03-31 17:04:55 vue.js

鎴戜互鍓嶆槸杩欐牱杩囨护鎼滅储鍐呭鐨刣ata.filter(item=>item.indexOf(keywords)>=0)杩欐牱纭疄鍙互婊¤冻鍏抽敭瀛楁悳绱㈢殑闇€姹傦紝浣嗘槸鐢变簬鍓嶇鏄洿鎺ユ妸鐢婚潰鍛堢幇缁欑敤鎴风殑浜猴紝鎵€浠ユ垜浠€绘槸闇€瑕佺珯鍦ㄧ敤鎴风殑瑙掑害鍘昏€冭檻闂銆傚仛浜嗗緢澶氶」鐩悗锛屽彂鐜拌繖鏍蜂笉澶熶汉鎬у寲銆傛垜浠潵鐪嬩笅闈㈢殑渚嬪瓙锛歝hrome娴忚鍣ㄤ腑鐨勭紪杈戞牱寮弙scode涓殑缂栬緫鏍峰紡鍦╟hrome娴忚鍣ㄤ腑锛屾棤娉曡繘琛岄潪杩炵画鐨勫瓧绗﹀尮閰嶏紝瀵艰嚧浣撻獙鎰熸湁浜涙瑺缂猴紝浣嗘槸鍦╲scode涓紝鍙互鑷敱鏂柇缁画杈撳叆鍏抽敭璇嶅尮閰嶃€傛鏃犵枒闂紝鎴戜滑鍦╲scode涓殑缂栬緫浣撻獙浼氭洿鍔犳祦鐣咃紝鍥犱负鍦ㄥ緢澶氬満鏅笅锛屾垜浠涓嶄綇涓€涓繛缁殑鍏抽敭瀛楋紝鑰屾槸鏂柇缁画鐨勫叧閿瓧锛岃繖鏃跺€欐垜浠娇鐢ㄨ繖涓柇鏂画缁殑鍏抽敭瀛楄繘琛屾悳绱紝鍙互闈炲父鐨勬彁鍗囩敤鎴蜂綋楠屽棷锛屼笉褰卞搷杩炵画鐨勫叧閿瘝鎼滅储銆備粈涔堝満鏅彲浠ヤ娇鐢ㄩ潪椤哄簭鍏抽敭璇嶆悳绱紵杩欑闇€姹備竴鑸槸鍦ㄦ悳绱㈡湰鍦版暟鎹殑鏃跺€欙紝褰撻渶姹傚満鏅病鏈夋槑纭瀹氶渶瑕佽繛缁叧閿瘝鎼滅储鏃讹紝鎴戜滑鍙互浣跨敤闈炶繛缁叧閿瘝鎼滅储鏉ュ疄鐜般€傚叿浣撳垪琛ㄥ涓嬪嚑绉嶅満鏅細鏍戝舰鑿滃崟椤规悳绱細绫讳技绠$悊鍚庡彴椤甸潰鑿滃崟锛屽鑺傜偣鎼滅储澶嶉€夋閫夐」鎼滅储锛氬彲浠ュ湪澶嶉€夋璺緞涓悳绱㈡洿澶氶€夐」鍒楄〃鎼滅储锛氬vs浠g爜鏂囦欢鎼滅储鏈湴缂撳瓨鎼滅储:wechatcachechat璁板綍鍏抽敭璇嶆悳绱㈡帴涓嬫潵锛屾垜浠潵璁ㄨ濡備綍浠庝竾鑳界殑npmjs.com涓疄鐜版敹鐩娿€傜粡杩囧悇绉嶆悳绱紝鍦ㄤ笂闈㈡壘鍒颁簡涓€涓笉閿欑殑js鍑芥暟搴擄紝鍙互瀹炵幇鍏抽敭璇嶇殑鏃犲簭鎼滅储銆傚厛鏉ョ湅涓€涓畝鍗曠殑demo锛岀劧鍚庡垎鏋愬叾瀹炵幇鍘熺悊銆俲s搴撳湪杩欓噷->string-discontinuous-match鍦ㄨ繖涓猟emo涓紝瀵?000涓暱搴︿负200鐨勯殢鏈哄瓧绗︿覆杩涜涓嶈繛缁殑鍏抽敭瀛楁悳绱€傚畬鎴愬崟娆℃悳绱粎闇€1-2ms锛屾€ц兘鍙銆傛帴涓嬫潵璐翠笂瀹炵幇浠g爜锛岄€氳繃Vue瀹炵幇

鏁版嵁鎬昏锛歿{numbers}}鎬ц兘锛歿{鎬ц兘}}
//鍒濆鐘舵€乨ata(){return{val:'',strings:strings,//stringscontain1000testrandomstringsnumbers:strings.length,performance:'',};}涓嬮潰瀹炵幇杈撳叆浜嬩欢import{discontinuousMatch,replaceMatchedString}from'string-discontinuous-match';functioninputHandler(){//this.val鏄悳绱㈠叧閿瓧if(this.val){lets=performance.now();璁﹔et=discontinuousMatch(strings,this.val);璁〆=performance.now();this.strings=ret.map(item=>{//杈呭姪鍑芥暟replaceMatchedStringreturnreplaceMatchedString(item,chars=>`${chars}`);});杩欍€傛€ц兘=(e-s)+'ms';}else{this.data=strings;this.strings=瀛楃涓诧紱this.performance='';}this.numbers=this.strings.length;}鎼滅储缁撴灉鏍煎紡涓猴細[{value:'xxx',//鎼滅储鍒扮殑瀛楃涓瞚ndex:0,//item鍦ㄦ暟缁勪腑鐨勭储寮?/鍖归厤鍏抽敭瀛楃殑绱㈠紩浣嶇疆锛屽[0,2]琛ㄧずvalue涓殑涓嬫爣涓?-2锛堝惈2锛変釜瀛楃锛?4琛ㄧず涓嬫爣涓?4鐨勫崟涓瓧绗osition:[[0,2],[10,12],14,17],lastIndex:17//lastmatchingindex},//...]鎵€浠ュ彲浠ュ埄鐢ㄤ綅缃俊鎭珮浜搴旂殑浣嶇疆瀛楃锛屼絾鏄叾瀹炰笉闇€瑕佽嚜宸卞鐞嗭紝string-discontinuous-match涓烘垜浠彁渚涗簡涓€涓緟鍔╁嚱鏁版潵澶勭悊锛屾瘮濡傚湪inputHandler鍑芥暟涓紝鍙互鐪嬪埌鍖归厤缁撴灉寰幆鍒颁簡replaceMatchedString鍑芥暟涓紝瀹冪殑浣滅敤灏辨槸甯姪鎴戜滑鎻愬彇鍖归厤鍒扮殑瀛楃涓层€傚畠鏍规嵁position鏁扮粍渚濇瑙﹀彂鍥炶皟銆傚湪浣嶇疆锛歔[0,2],[10,12],14,17]涓紝鍒嗗埆鎻愬彇涓嬫爣0鍒?銆傚瓧绗︿覆锛屽苟瑙﹀彂鍥炶皟锛屽湪鍥炶皟涓彲浠ヨ繑鍥炶浆鎹㈠悗鐨勫瓧绗︿覆锛屾瘮濡傜敤鏍囩鍖呰9锛岀劧鍚庢彁鍙?0鍒?2涓瓧绗︿覆瑙﹀彂鍥炶皟锛屼互姝ょ被鎺ㄥ叡瑙﹀彂4娆″洖璋冿紝鏈€鍚庡皢杞崲鍚庣殑瀛楃涓茶繑鍥炵粰鎴戜滑锛岃繖鏍锋垜浠氨鍙互杞绘澗瀹炵幇鍖归厤鍏抽敭璇嶇殑楂樹寒鐘舵€併€傞€氳繃杩欐牱鐨勬搷浣滐紝瀹炵幇浜嗕笉杩炵画鍏抽敭璇嶆悳绱㈢殑鍔熻兘銆傝〃鐜板浣曪紵锛燂紵澶у搴旇閮芥湁杩欐牱鐨勭枒闂紝鏁版嵁閲忓皬锛屼絾鏄浜庡ぇ鏁版嵁閲忕殑鍖归厤锛屼細涓嶄細寰堟參鍛紵姣曠珶鏄潪杩炵画鍖归厤锛侊紒锛佽繖涓棶棰橈紝杩欎釜js搴撶粰鍑轰簡杩欐牱鐨勭瓟妗堬細鍦?000涓瓧绗︾殑10000涓殢鏈哄瓧绗︿覆涓悳绱?0涓殢鏈簁ey瀛楃涓诧紝蹇界暐澶у皬鍐欙紝鑰楁椂101ms锛屾€ц兘涓嶉敊銆傛渶鍚庯紝瀵逛簬涓€涓墠绔潵璇达紝杩樻槸搴旇鎶婄敤鎴蜂綋楠屾斁鍦ㄩ噸瑕佺殑浣嶇疆锛岃繖涓悳绱㈠氨鏄紭鍖栫偣涔嬩竴銆傛垜浠彲浠ラ€氳繃涓€涓畝鍗曠殑鎿嶄綔鏉ヨВ鍐宠繖涓棶棰樸€備笉鐭ラ亾鐪嬪畬鏂囩珷鐨勪綘瑙夊緱鍊煎緱涓€璇曞悧锛熷鏋滃杩欎釜js搴撴劅鍏磋叮锛屽彲浠ヨ嚜宸卞幓鐮旂┒婧愮爜锛屽叾瀹炰篃寰堢畝鍗曘€備粖澶╁氨鍒拌繖閲岋紝鏈変粈涔堥棶棰樺彲浠ョ粰浣滆€呮彁issue銆傚鏋滄偍瀵规垜鐨勬暀绋嬫劅鍒版弧鎰忥紝璇蜂笉瑕佸悵鍟偍鐨勫厤璐瑰ソ璇勶紒锛侊紒