De nada, juaniytoscovi! Si tienes alguna otra pregunta, no dudes en hacerla. ¡Estoy aquí para ayudar!
<script>
$("#search").on("keyup", function(){
var query = $(this).val();
var url = "/feeds/posts/default?alt=json-in-script&callback=?";
$.ajax({
url: url,
dataType: "jsonp",
data: {"q": query,"orderBy": "updated"},
success: function(data) {
$("#results").empty();
var entries = data.feed.entry || [];
for(var i=0; i<entries.length; i++){
var entry = entries[i];
var title = entry.title.$t;
var img = entry.media$thumbnail ? entry.media$thumbnail.url : '';
$("#results").append('<div><img src="'+img+'"/><h2>'+title+'</h2></div>');
}}});});
</script>Para mostrar los resultados mientras escribes, ya lo estás haciendo con el evento "keyup". El problema es que estás buscando una coincidencia exacta al verificar "title === query", por lo que solo se mostrarán los resultados cuando se escriba el título completo. Para que aparezcan resultados de manera incremental, puedes buscar si el título contiene la query usando "title.includes(query)".
<script>
$("#search").on("keyup", function(){
var query = $(this).val();
var url = "/feeds/posts/default?alt=json-in-script&callback=?";
$.ajax({
url: url,
dataType: "jsonp",
data: {
"q": query,
"orderBy": "updated"
},
success: function(data) {
$("#results").empty();
var entries = data.feed.entry || [];
for(var i=0; i<entries.length; i++){
var entry = entries[i];
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var publishedDate = entry.published.$t;
if (title.includes(query)) {
var img = entry.media$thumbnail ? entry.media$thumbnail.url : '';
$("#results").append('<div><img src="'+ img +'"/><h2>'+ title +'</h2><p>'+ author +'</p><p>'+ publishedDate +'</p></div>');
}
}
}
});
});
</script>¿cómo le agrego a la imagen el enlace de la entrada?
Para agregar el enlace de la entrada a la imagen, primero necesitas conseguir el enlace de la entrada, que normalmente se encuentra en el objeto del feed. Aquí se muestra cómo puedes hacerlo:
<script>
$("#search").on("keyup", function(){
var query = $(this).val();
var url = "/feeds/posts/default?alt=json-in-script&callback=?";
$.ajax({
url: url,
dataType: "jsonp",
data: {
"q": query,
"orderBy": "updated"
},
success: function(data) {
$("#results").empty();
var entries = data.feed.entry || [];
for(var i=0; i<entries.length; i++){
var entry = entries[i];
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var publishedDate = entry.published.$t;
var link = entry.link[0].href;
if (title.includes(query)) {
var img = entry.media$thumbnail ? entry.media$thumbnail.url : '';
$("#results").append('<div><a href="' + link + '"><img src="'+ img +'"/></a><h2>'+ title +'</h2><p>'+ author +'</p><p>'+ publishedDate +'</p></div>');
}
}
}
});
});
</script>me sale algo asi : https:// .blogspot.com/feeds/…4993741050/comments/default
Sí, parece que el enlace no está correcto. Parece un enlace a los comentarios de una entrada dado el "/comments/default" al final.
entry.link el objeto cuyo atributo rel sea igual a alternate, que es típicamente el que tiene la URL de la entrada. Aquí te dejo un ejemplo de cómo hacerlo:var link = '';
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel === 'alternate') {
link = entry.link[j].href;
break;
}
}link en lugar de entry.link[0].href en tu código. Esto debería darte la URL correcta de la entrada del blog.
A continuación, te muestro un ejemplo de cómo podrías hacer un icono de carga animado (spin) con CSS y keyframes:
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.load-more {
width: 50px;
height: 50px;
border-radius: 50%;
border: 6px solid #ccc;
border-top-color: #333;
animation: spin 2s linear infinite; /* Aquí, "2s" se refiere a la velocidad de la animación. Si deseas que gire más lentamente, puedes incrementar este valor. */
}
</style><div class="load-more"></div>¿Cómo alneo verticalmente el "load-more", queda mas arriba que las letras de Load More, cambie el div por span en <div class='more-result'><span class="load-more"></span> <span>Load More</span></div>
Para alinear verticalmente el icono "load-more" con el texto "Load More", necesitarás utilizar las propiedades CSS 'display' y 'align-items'. Podrías probar con el siguiente código CSS:
<style>
.more-result {
display: flex;
align-items: center;
justify-content: center;
gap: 10px; /* separación entre el elemento Load More y el spinner */
}
</style>Para borrar cualquier valor que se haya introducido previamente en el campo de búsqueda cuando la página se carga, puedes usar el atributo 'autocomplete' con el valor 'off' en la etiqueta 'input'. Aquí tienes el código:
<input class="searchbari" placeholder="Type and hit enter" type="search" autocomplete="off">Tu método actual debería centrar el ".loader", aunque en lugar de usar márgenes negativos, puedes usar la propiedad "transform" para mover el ".loader" hacia arriba y hacia la izquierda en un 50%. Aquí está tu código modificado:
.loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}Podrías usar la función 'calc' de CSS para restar un valor fijo al 100% de la altura del viewport. Esto debería hacer que ".search-content" tenga una altura que llegue casi hasta el final de la página, con algo de espacio en la parte inferior. El código sería algo como esto:
.search-content {
height: calc(100vh - 50px); /* Ajusta el "50px" al espacio que desees en la parte inferior*/
overflow: auto;
}Puedes usar el siguiente script de Greasemonkey para reemplazar /60/60/fit/ce por /999999/999999/fit/ce en las URLs de las imágenes:
// ==UserScript==
// @name Replace Image URL
// @namespace http://tampermonkey.net/
// @version 0.1
// @description replace certain part of image URL
// @author You
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
document.querySelectorAll('img').forEach(img => {
img.src = img.src.replace("/60/60/fit/ce", "/999999/999999/fit/ce");
});
})();pero no todas las urls tienen 60/60 tienen diferentes pares de números
