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

Question

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

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

为此，我想知道是否有可用的jQuery 插件，否则我该如何实现。

Answer 1

我终于设法在没有使用任何 jquery 插件的情况下做到了。发布解决方案以防万一有人正在寻找相同的解决方案。

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

这是我的解决方案的样子-

           <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;
}