javascript - 有没有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;
}