index.html

<html>
<head>
    <title>page principale</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="config.jsonp"></script>
    <script type="text/javascript">
        function request() {
            $.ajax({
                url: config.url + "/" + config.collection + "/?" + decodeURI(document.location.href.split('#')[1]),
                type: 'get',
                dataType: 'jsonp',
                jsonp: 'jsonp', // mongod is expecting the parameter name to be called "jsonp"
                cache: false,
                success: function (myData) {
                    for (var item in myData.rows) {
                        var model = jQuery("div[name='toFill']").first().clone();
                        model.find("a[name='link']").attr("href", "title.html#" + encodeURI(myData.rows[item].title));
                        model.find("span[name='title']").text(myData.rows[item].title);
                        model.css("display", "block")
                        model.appendTo(jQuery("body").first());
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log('error', errorThrown + " " + textStatus);
                }
            });
        }
        jQuery("document").ready(request);
    </script>
</head>
<body>
    <form onsubmit="document.location.href = document.location.href.split('#')[0] + '#' + encodeURI($('#search').val()); document.location.reload(); return false;"><input type="text" id="search" style="width:100%" /></form>
    <div name="toFill" style="display:none;">
        <a href="" name="link">
             <div style="width:100%; text-align: center; border: solid 1px black; padding: 5px; margin: 3px;">
                <span name="title">

                </span>
            </div>
        </a>
    </div>
</body>
</html>