是否有任何jQuery插件可用於顯示最近的搜索歷史

當前在我的應用程序中，我有搜索框顯示匹配項目的列表。爲此，我正在使用簡單的jQuery包含方法。是否有任何jQuery插件可用於顯示最近的搜索歷史

現在我想要做的是顯示最近的搜索文本也與一些下拉圖標和搜索圖像。

爲此我想知道是否有任何jQuery插件可用，否則我該如何實現此目的。

2016-02-26 pooja

http://www.sitepoint.com/14-jquery-live-search-插件/ –

http://tkyk.github.io/jquery-history-plugin/ – Nagaraju

Pooja，你需要做的是用文本框實現一個實時搜索/自動完成腳本。您必須將搜索關鍵字存儲在數據庫中，並在用戶鍵入某個關鍵字時顯示在自動完成輸出中。您可以使用Jquery Auto complete插件或Twitter TypeAhead插件。 Twitter typeAhead爲自動完成提供了更多外觀和感覺。 –

我終於設法做到了這一點，沒有使用任何jQuery插件。發佈解決方案以防萬一有人在尋找相同的東西。

我使用了簡單的引導組件和類。輸入字段，在其左側放置搜索圖標，其屬性數據切換dropown將顯示列表項，並在輸入字段的右側放置一個按鈕，從輸入字段保存文本。

這裏是我的soluiton的樣子喜歡 -

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

來源

2016-03-02 06:50:19 pooja

是否有任何jQuery插件可用於顯示最近的搜索歷史

回答

相關問題