是否有任何jquery插件可用于显示最近的搜索历史记录

Question

目前在我的应用程序中，我有搜索框，显示匹配项目列表。 为此，我现在使用简单的jQuery包含方法。

现在我要做的是显示最近的搜索文本，还有一些下拉图标和搜索图像。

为此，我想知道是否有可用的jQuery插件，或者我怎样才能实现此目的。

Answer 1

我终于设法使用任何jquery插件。发布解决方案以防万一有人在寻找相同的内容。

我使用了简单的bootstrap组件和类。输入字段，左侧放置搜索图标，带有属性数据切换下拉列表，显示列表项，并在输入字段右侧放置一个按钮，保存输入字段中的文本。

以下是我的解决方案的样子 -

           <div class="pull-left dropdown">
                <span rel="localize[tabs.workflows]">&nbsp;</span>
                    <a id="show-search-history" class="" data-toggle="dropdown" href="#"> <i class="icon-zoom-in"></i> </a>
                    <ul id="search-list" class="dropdown-menu search-list-menu" >
                        <li>qq</li>
                        <li>op</li>
                        <li>new</li>
                        <li>wf</li>
                        <li>2</li>
                        <li>oj</li>
                    </ul>

                <input type="text" name="search" value="" id="search-wf" placeholder="Search Workflow" autofocus />
                <button id="save-search-text" class="btn" style="">Save</button>
            </div>

并且css发生变化： -

.search-list-menu {
min-width: 230px;
right: 53px;
top: 88%;
}
.search-list-menu li:hover {
color: white;
text-decoration: none;
background-color: #0088cc;
}
.icon-zoom-in {
z-index: 999;

}

a#show-search-history {
left: 35px;
position: relative;
top: 5px;
text-decoration: none;
}
#save-search-text {
border-radius: 0 14px 14px 0;
height: 30px;
margin-left: -20px;
}