Tutorial: Aporte de Buscador Personalizado

aleh3120 dijo:

Hola gente les traigo un pequeño aporte, se que no es perfecto pero es un avance que quería compartir.
Solo tienen que poner la url de su blog en "BLOG_URL" y ya estaría, los estilos pueden modificarlo a su gusto 🤗

Ver el archivo adjunto 1389192

DEMO​

CSS:

.live-wrapper{--l-color:#71767b;--l-bg:#fff;--l-hover:#eceff1;--l-scroll:#dee2e6;--s-input:0 4px 6px -1px rgb(17 24 39 / 10%),0 2px 4px -1px rgb(17 24 39 / 5%);--s-results:0 10px 15px rgb(17 24 39 / 10%),0 4px 6px -2px rgb(17 24 39 / 5%);position:relative}
.live-input{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:45px;background:var(--l-bg);color:var(--l-color);font-size:14px;font-weight:500;border-radius:6px;box-shadow:var(--s-input);padding:0 12px;z-index:2}.live-input input{width:100%;background:transparent}.live-input input::placeholder{color:var(--l-color);opacity:.7}.live-input input:focus-visible{outline:none}.live-input input:not(:placeholder-shown) + .l-clear{opacity:.85}.l-search,.l-clear{width:var(--i-size,18px);min-width:var(--i-size,18px);height:var(--i-size,18px);stroke:currentColor;stroke-width:var(--i-stroke,2);stroke-linecap:round;stroke-linejoin:round;fill:none;margin-bottom:2px}.l-clear{--i-size:16px;--i-stroke:3;opacity:0;transition:.3s}.live-results{position:absolute;top:100%;width:100%;min-height:72px;max-height:240px;display:grid;background:var(--l-bg);color:var(--l-color);font-size:14px;border-radius:6px;overflow:hidden;overflow-y:auto;transform-origin:top center;transform:translateY(-1rem);opacity:0;transition:transform .4s,opacity .3s;pointer-events:none;box-shadow:var(--s-results);padding:8px;margin-top:10px;z-index:1}.live-results::-webkit-scrollbar{width:12px}.live-results::-webkit-scrollbar-thumb{background-color:var(--l-scroll);border-radius:9px;border:4px solid transparent;background-clip:content-box}.live-results::-webkit-scrollbar-track,.live-results::-webkit-scrollbar-track-piece{background-color:transparent}.live-results.is-show{opacity:1;transform:translate(0);pointer-events:all}.result-item{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:10px;border-radius:8px;transition:background .2s;animation:fadeInDown .4s;cursor:pointer;padding:8px}.result-item:hover{background:var(--l-hover)}.result-thumbnail{width:40px;height:40px;object-fit:cover;border-radius:4px}.result-title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.search-spinner{display:block;width:24px;height:24px;border-radius:50%;background:radial-gradient(farthest-side,var(--l-color) 94%,#0000) top/4px 4px no-repeat,conic-gradient(#0000 30%,var(--l-color));-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);animation:spinner 1s infinite linear}.live-results:has(.result-item:nth-child(n+5)) .result-item{margin-right:-6px}.live-results:not(:has(.result-item)){justify-content:center;align-items:center;text-align:center}@keyframes spinner{100%{transform:rotate(1turn)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:translateY(0)}}@-moz-document url-prefix(){.live-results{scrollbar-width:thin;scrollbar-color:var(--l-scroll) transparent}.live-results:has(.result-item:nth-child(n+5)) .result-item{margin-right:0}}

HTML:

<div class="live-wrapper"><div class="live-input"><svg class="l-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg><input aria-label="search" autocomplete="off" id="q" name="q" placeholder="Buscar" spellcheck="false" type="text"/><svg class="l-clear" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></div><div class="live-results"></div></div>

JavaScript:

<script>/*<![CDATA[*/!function(){const e="BLOG_URL",f="https://i.imgur.com/kQxzAj0.jpeg",m="all",q=v;(function(p,V){const Z=v,j=p();while(!![]){try{const x=parseInt(Z(0x131))/0x1+-parseInt(Z(0x10c))/0x2*(-parseInt(Z(0x12e))/0x3)+parseInt(Z(0x106))/0x4+-parseInt(Z(0x125))/0x5*(parseInt(Z(0x105))/0x6)+-parseInt(Z(0x122))/0x7+-parseInt(Z(0x12c))/0x8*(-parseInt(Z(0x114))/0x9)+-parseInt(Z(0x130))/0xa;if(x===V)break;else j['push'](j['shift']());}catch(X){j['push'](j['shift']());}}}(B,0x79038));const t=document[q(0x112)](q(0x12b)),s=document[q(0x112)](q(0x119)),n=document[q(0x112)](q(0x12a));function B(){const b=['add','30STFfvH','3440104FPMkLc','media$thumbnail','mousedown','all','click','classList','2yQDfdW','.live-wrapper','url','\x22><img\x20class=\x22result-thumbnail\x22\x20src=\x22','is-show','input','querySelector','</span></a>','11853VZPFrJ','Enter','toLowerCase','title','&max-results=500&q=','.live-results','find','rel','\x22\x20title=\x22','<a\x20class=\x22result-item\x22\x20href=\x22','link','json','+&by-date=true&strict-mode=true','value','1851423LEwOYJ','/search?q=','feed','742145GIBZwB','map','/feeds/posts/summary?alt=json&start-index=','closest','innerHTML','.l-clear','.live-input\x20input','2592tANjPt','join','829536ztbOoh','keydown','6901080MZAVFZ','629168pXlThO','test','\x22.</div>','push','location','remove','href','\x22\x20alt=\x22thumbnail\x22\x20loading=\x22lazy\x22><span\x20class=\x22result-title\x22>','target','trim','addEventListener','length','slice'];B=function(){return b;};return B();}function v(p,V){const j=B();return v=function(x,X){x=x-0xf9;let P=j[x];return P;},v(p,V);}let a;const i=async p=>{const z=q,V=z(0x109)===m?Infinity:parseInt(m,0xa);let j=0x1,x=[],X=new RegExp('\x5cb'+p+'\x5cb','i');for(;x[z(0x102)]<V;){const P=await fetch(e+z(0x127)+j+z(0x118)+encodeURIComponent(p)),u=await P[z(0x11f)](),U=u[z(0x124)]?.['entry']||[];if(x[z(0xfa)](...U[z(0x126)](E=>({'title':E[z(0x117)]['$t'],'link':E[z(0x11e)][z(0x11a)](Q=>'alternate'===Q[z(0x11b)])[z(0xfd)],'thumbnail':E[z(0x107)]?.[z(0x10e)]||f}))['filter'](E=>X[z(0x132)](E[z(0x117)][z(0x116)]()))),U[z(0x102)]<0x1f4||x[z(0x102)]>=V)break;j+=0x1f4;}return x[z(0x103)](0x0,V);},r=()=>{const f=q;clearTimeout(a),s[f(0x10b)][f(0xfc)](f(0x110)),setTimeout(()=>{const m=f;s[m(0x129)]='';},0x190);};t[q(0x101)](q(0x12f),function(p){const M=q;M(0x115)===p['key']&&((()=>{const o=M;window[o(0xfb)][o(0xfd)]=e+o(0x123)+(t&&''!==t[o(0x121)]['trim']()?t['value'][o(0x100)]():'')+o(0x120);})());}),t[q(0x101)](q(0x111),()=>{const F=q,p=t[F(0x121)][F(0x100)]()[F(0x116)]();if(clearTimeout(a),!p)return r();a=setTimeout(async()=>{const c=F;s[c(0x10b)][c(0x104)](c(0x110)),s[c(0x129)]='<span\x20class=\x27search-spinner\x27></span>';try{const V=await i(p);s[c(0x129)]=V['length']?V[c(0x126)](j=>c(0x11d)+j[c(0x11e)]+c(0x11c)+j[c(0x117)]+c(0x10f)+j['thumbnail']+c(0xfe)+j[c(0x117)]+c(0x113))[c(0x12d)](''):'<div\x20class=\x22no-results\x22>No\x20se\x20encontraron\x20resultados\x20para\x20\x22'+p+c(0xf9);}catch{s[c(0x129)]='Error\x20al\x20buscar\x20entradas.\x20Intenta\x20nuevamente.';}},0x258);}),t[q(0x101)]('click',()=>{const O=q;t[O(0x121)][O(0x100)]()&&s[O(0x10b)][O(0x104)](O(0x110));}),n[q(0x101)](q(0x10a),()=>{const h=q;r(),t[h(0x121)]='';}),document[q(0x101)](q(0x108),p=>{const I=q;p[I(0xff)][I(0x128)](I(0x10d))||s[I(0x10b)][I(0xfc)]('is-show');})}();/*! Search Live - Aleh *//*]]>*/</script>

Hacer clic para expandir...

Gracias crack