Javascript forloop中html中的网格系统

我试图创建一个有趣的网站，现在我遇到了一个设计问题。我在这里尝试做的是有一个搜索栏（它会自动提示api的结果，然后用户应该能够单击图像来选择它）

我还没有添加自动完成功能，但我现在想做的是在按下按钮后给出建议。网格要么是一个长行，要么是一堆乱七八糟的图像，这也破坏了我在页面上其他部分的布局

我可以得到一些建议，如何能够使搜索结果显示在一个网格和工作是可选的

我的html的一部分：

    <div>
<h1>Search field</h1>
<input id="search" style="width: 500px; height: 50px;font-size:18pt;" placeholder="Titel"><br>
<button id="button" type="button">GO</button>
<div id="results"></div>
<p></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/seekBook.js"></script>
<script>
function selectFunction() {
return "<p1>worked</p>";
}
document.getElementById("foradd").addEventListener('click', myFunction,false)
</script>
</div>

搜索字段


去

函数selectFunction（）{
返回“已工作”
；
}
document.getElementById（“foradd”）.addEventListener（'click'，myFunction，false）

我在seekBook.js中组织网格的尝试如下：

success: function(data){
        for (i = 0; i < data.items.length; i++) {
            results.innerHTML += 
            '<div class="container">'
                +'<div class="row">'
                    +'<div class="col-lg-2 col-lg-offset-5">'
                        +'<hr class="marginbot-50">'
                    +'</div>'
                +'</div>'
                +'<div class="row">'
                    +'<div class="col-md-3">'
                        +'<div class="wow bounceInUp" data-wow-delay="0.2s">'
                            +'<div class="team boxed-grey">'
                                +'<div class="inner">'
                                    +'<h5>'
            +data.items[i].volumeInfo.title
                                    +'</h5>'
                                    +'<p class="subtitle">'
            +data.items[i].volumeInfo.authors
                                    +'</p>'
                                    +'<div class="avatar">'
                                        +'<img id="forAdd" img src="'
            +data.items[i].volumeInfo.imageLinks.smallThumbnail+' " onclick="selectFunction()" alt=""/>'
                                    +'</div>'
                                +'</div>'
                            +'</div>'
                        +'</div>'
                    +'</div>'
                +'</div>'
            +'</div>'
        }
    },

成功：函数（数据）{
对于（i=0；i”
+''
+''
+''
+''
+''
+''
+''
+''
+data.items[i].volumeInfo.title
+''
+“
”
+data.items[i].volumeInfo.authors
+“
”
+''
+''
+''
+''
+''
+''
+''
+''
+''
}
},

我的建议是：摆脱js，准备一个仅限html的示例布局。当您有了正确的标记后，您可以添加js以使用for循环替换多个元素。如果你能为你的问题提供一个JSFIDLE，那就太好了。真的不清楚具体的问题是什么。请花几分钟时间阅读，然后编辑带有特定问题详细信息的问题