Una posible solución para hacerlo dinámico sería agregar un parámetro a Cargardata
para que no se limíte a mostrar 9 elementos:
function Cargardata(count) {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, 'i');
$.getJSON('/books-schema.json', function(data) {
var output = '<ul id="resultado">';
// aquí indicamos cuántos items desea mostrar con respecto al parámetro `count`
var dataToShowdataCounter = data.data.slice(0, count);0;
$.each(dataToShowdata.data, function(i, item) {
if ((dataCounter < count) && ((item.title.search(myExp) != -1) || (item.teaser.search(myExp) != -1))) {
output += '<li>';
output += '<span class="image"><img src=' + item.image + '/></span>';
output += '<span class="title">' + '<h3>' + item.title + '</h3>' + '</span>';
output += '<span class="description">' + '<p>' + item.teaser + '</p>' + '</span>';
output += '</li>';
dataCounter +=1;
}
});
output += '</ul>';
$('content').html(output);
});
}
Ya con esto podrías llamar a la función con un número aleatorio de items a mostrar:
Cargardata(9);