搜索通過列表項上的每個輸入按鍵使用jQuery，並隱藏其他項目

我有列表項的代碼，我想用文本框，我怎麼能執行搜索項目： -搜索通過列表項上的每個輸入按鍵使用jQuery，並隱藏其他項目

Pricerange.Append("<ul>"); 

for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
{ 
    Pricerange.Append(
     "<li><span class='pull-left'><a href='default.aspx?Price=" + 
     ds.Tables[0].Rows[i]["Max_id"] + "' >" + ds.Tables[0].Rows[i]["Max_Price"] + 
     "</a></span> <span class='counter-pro pull-right'>12</span></li>"); 
} 

Pricerange.Append("</ul>"); 
divpricerange.InnerHtml = Pricerange.ToString();

See This Image - 左手邊在精煉搜索我想執行自動完成操作並隱藏其他listitem。

來源

2014-11-17 Praveen Singh

您可以使用jQuery :contains選擇器來搜索列表，然後根據搜索結果顯示/隱藏列表項目。

這裏是一個快速片段，會給你一個想法：

演示小提琴：http://jsfiddle.net/mwdune35/1/

/* jQuery code to search and reveal */ 
 

 
$("#txt").on("keyup", function() { 
 
    var srchTerm = $(this).val(), 
 
     $rows = $("#lst").children("li"); 
 
    if (srchTerm.length > 0) { 
 
     $rows.stop().hide(); 
 
     $("#lst").find("li:contains('" + srchTerm + "')").stop().show(); 
 
    } else { 
 
     $rows.stop().show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Your HTML --> 
 
<input id="txt" type="text" /> 
 
<br /> 
 
<ul id="lst"> 
 
    <li><a href="#">JM Aroma</a></li> 
 
    <li><a href="#">Red Square Bonanza</a></li> 
 
    <li><a href="#">Skylabs Special</a></li> 
 
    <li><a href="#">Society Someplace</a></li> 
 
    <li><a href="#">Anywhere</a></li> 
 
    <li><a href="#">Everywhere</a></li> 
 
    <li><a href="#">Nowhere</a></li> 
 
    <li><a href="#">Somewhere</a></li> 
 
</ul>

來源

2014-11-17 05:59:10 Abhitalks

演示完美的作品，但是當我在我的代碼它不能正常工作落實，數據來源於數據庫，因爲我上面顯示... –

在這種情況下，我會建議你使用自動完成插件，將啓動ajax查詢從服務器檢索匹配的記錄。你將有一個寫一個Web服務，將響應AJAX調用。該服務可能會將原始JSON或預先形成的列表項作爲HTML返回。 – Abhitalks

請檢查該post

它使用表而不是列表，但你可以玩它。

$.each($("#table tbody").find("tr"), function() { 
     if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1) 
      $(this).hide(); 
     else 
      $(this).show();     
    })

來源

2014-11-17 06:04:49 Chris

這樣這個腳本會執行感謝@ abhitalks有價值的建議..

$(document).ready(function() { 
     $("#txt").on("keyup", function() { 
      var srchTerm = $(this).val(), 
       $rows = $("#lst").children("li"); 
      if (srchTerm.length > 0) { 
       $rows.stop().hide(); 
       $("#lst").find("li:contains('" + srchTerm + "')").stop().show(); 
      } else { 
       $rows.stop().show(); 
      } 
     }); 
     });

來源

2014-11-17 08:18:02

回答

相關問題