Aquí tienes un ejemplo básico de cómo podrías hacer un buscador AJAX que busca en el feed de un blog de Blogger y muestra los resultados con una imagen.
Por razones de simplicidad, este ejemplo no está completo y precisas completarlo según tus necesidades. Nota que tu servidor debe tener configurado el CORS para que los requests desde diferente origen sean permitidos.
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="search" placeholder="Buscar posts..."/>
<div id="results"></div>
<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><h2>'+title+'</h2><img src="'+img+'"/></div>');
}
}
});
});
</script>
</body>
</html>
En este código, cuando el usuario escribe en el campo de búsqueda, se solicita el feed del blog desde Blogger usando AJAX. Luego, se recorren las entradas del blog que coinciden con la consulta y se muestra el título y la imagen de cada entrada en los resultados.
Por favor modifícalo y adáptalo según tus necesidades.