HTML / CSS样式过滤搜索结果包括缩略图和SKU

Question

TL，DR;如何使用HTML / CSS / JQUERY从搜索栏创建风格化的过滤搜索结果，类似于下面的示例图片

我正在尝试为网站设置搜索结果的样式，并且需要两列来显示您何时开始在搜索栏中输入内容，＆＃34;建议＆＃34;和＆＃34;结果＆＃34;。我需要它在基本文本列表中显示左侧的建议，然后在右侧我需要显示包含缩略图，项目名称和SKU的列表中的匹配项。我目前正在使用＆＃34; datalist＆＃34;但要知道这个id的风格化很难。我打开使用jquery，json，xml或直接使用HTML / CSS。这只是一个前端模型，因此它可以从一个简短的示例项列表中提取以显示功能。

以下是我喜欢的示例：

到目前为止，我使用datalist id和选项值的代码：

      <div class="form-group">
                            <form class="navbar-form">
                                <input class="form-control input-lg" list="products" action="/action_page.php" method="get" placeholder="Search..." type="text">
                                <datalist id="products">
                                    <option value="Necklace">
                                    <option value="Ring">
                                    <option value="Bracelet">
                                    <option value="Chain">
                                    <option value="Charm">
                                </datalist>
                                <select class="form-control input-lg">
                                    <option> All </option>
                                    <option> Women </option>
                                    <option> Men </option>
                                    <option> Kids </option>
                                    <option> Accessories </option>
                                    <option> ---- </option>
                                    <option> Classes </option>
                                    <option> Articles </option>
                                </select>
                                <button class="btn btn-primary btn-lg" type="submit">Go</button>
                            </form>
                        </div>