2009-11-12 131 views
0

我一直在尋找周圍的方法,我可以實現我的網頁上的輸入框,將按照關鍵詞過濾,很像一個buysellads.com使用here,你在相關的網站,它的關鍵詞輸入自動過濾列表。例如,如果您輸入'photoshop',它將抓取所有帶有photoshop標籤的網站。過濾器按關鍵字的jQuery

我很喜歡,也能實現該功能你說'Photoshop的過濾時點擊添加按鈕後,字的Photoshop被輸入框下放置一個「X」按鈕來關閉特定的過濾器。這是用jquery完成的嗎?

任何幫助將是巨大的,謝謝。

這裏是我的網頁,我目前正在與想實現上面的示例代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery Checkbox Filter Test</title> 
<style type="text/css"> 
@import url(css/screen.css); 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("input.type_check").click(function() { 
      if($(this).is(':checked')) { 
       $("#events li."+$(this).attr('id')).removeClass('type_hidden'); 
       $("#events li").not(".type_hidden, .start_hidden, .color_hidden").slideDown(); 
      } else { 
       $("#events li."+$(this).attr('id')).addClass('type_hidden'); 
       $("#events li."+$(this).attr('id')).slideUp(); 
      } 
     }); 

     $("input.start_check").click(function() { 
      if($(this).is(':checked')) { 
       $("#events li."+$(this).attr('id')).removeClass('start_hidden'); 
       $("#events li").not(".type_hidden, .start_hidden, .color_hidden").slideDown(); 
      } else { 
       $("#events li."+$(this).attr('id')).addClass('start_hidden'); 
       $("#events li."+$(this).attr('id')).slideUp(); 
      } 
     }); 
     $("input.color_check").click(function() { 
      if($(this).is(':checked')) { 
       $("#events li."+$(this).attr('id')).removeClass('color_hidden'); 
       $("#events li").not(".type_hidden, .start_hidden, .color_hidden").slideDown(); 
      } else { 
       $("#events li."+$(this).attr('id')).addClass('color_hidden'); 
       $("#events li."+$(this).attr('id')).slideUp(); 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
<h2>FILTER PRODUCTS BY:</h2> 
<div id="sport-cat"> 
<p>Sport:</p> 
<div> 
    <input name="type[]" type="checkbox" id="type_4" value="4" class="type_check" checked="checked" /> 
    <label for="type_4">Soccer</label> 
</div> 
<div> 
    <input name="type[]" type="checkbox" id="type_1" value="1" class="type_check" checked="checked" /> 
    <label for="type_1">Baseball/ Softball</label> 
</div> 
<div> 
    <input name="type[]" type="checkbox" id="type_2" value="2" class="type_check" checked="checked" /> 

    <label for="type_2">Basketball</label> 
</div> 
<div> 
    <input name="type[]" type="checkbox" id="type_5" value="5" class="type_check" checked="checked" /> 
    <label for="type_5">Boxing</label> 
</div> 
<div> 
    <input name="type[]" type="checkbox" id="type_3" value="3" class="type_check" checked="checked" /> 
    <label for="type_3">Football</label> 

</div> 
<div> 
    <input name="type[]" type="checkbox" id="type_0" value="0" class="type_check" checked="checked" /> 
    <label for="type_0">Golf</label> 
</div> 
</div> 
<div id="model-cat"> 
<p>Model:</p> 
<div> 
    <input name="start[]" type="checkbox" id="start_072009" value="072009" class="start_check" checked="checked" /> 
    <label for="start_072009">T-Shirts</label> 
</div> 

<div> 
    <input name="start[]" type="checkbox" id="start_082009" value="082009" class="start_check" checked="checked" /> 
    <label for="start_082009">Shorts</label> 
</div> 
<div> 
    <input name="start[]" type="checkbox" id="start_092009" value="092009" class="start_check" checked="checked" /> 
    <label for="start_092009">Hats & Caps</label> 
</div> 
<div> 
    <input name="start[]" type="checkbox" id="start_102009" value="102009" class="start_check" checked="checked" /> 

    <label for="start_102009">Jackets</label> 
</div> 
</div> 
<div id="color-cat"> 
<p>Color:</p> 
<div> 
    <input name="color[]" type="checkbox" id="color_072010" value="072010" class="color_check" checked="checked" /> 
    <label for="color_072010">Black</label> 
</div> 

<div> 
    <input name="color[]" type="checkbox" id="color_082010" value="082010" class="color_check" checked="checked" /> 
    <label for="color_082010">Blue</label> 
</div> 
<div> 
    <input name="color[]" type="checkbox" id="color_092010" value="092010" class="color_check" checked="checked" /> 
    <label for="color_092010">Green</label> 
</div> 

</div> 
<h2>Results</h2> 
<ul id="events"> 
    <li id="event_1768" class="type_1 start_072009 color_072010"> 
      <h3>BASEBALL/SOFTBALL - Nike Manny Pacquiao (Giants) Men's T-Shirt</h3> 
    </li> 
    <li id="event_2190" class="type_2 start_072009 color_082010"> 
      <h3>LeBron Vs. Men's T-Shirt</h3> 

    </li> 
    <li id="event_2191" class="type_2 start_082009 color_092010"> 
      <h3>Kobe Supreme Men's Basketball Shorts</h3> 
    </li> 
    <li id="event_1864" class="type_2 start_072009 color_082010"> 
      <h3>Kobe Vs. Men's T-Shirt</h3> 
    </li> 
</ul> 
</body> 
</html> 

編輯:

下面是我已經添加到頁面中的新的輸入字段。我想知道如何在輸入框中輸入類似'Kobe'的東西,然後按添加鏈接/按鈕,然後它只使用jquery顯示帶有單詞'Kobe'的項目。我目前不需要自動完成功能。我不知道如何爲此做jQuery。

<ul> 
    <li class="section keyword"> 
    <input id="newtag" class="text" type="text" value="filter by keyword" name="keyword"/> 
     <ul class="buttons"> 
      <li class="button add"> 
       <a id="addtag" href="#"> 
        <em>Add</em> 
       </a> 
      </li> 
     </ul> 
    <ul id="existingtags" class="keywords"> </ul> 
    </li> 
</ul> 

此外,當「科比在輸入鍵入我想在輸入(科比)在無序列表中顯示「existingtags」並點擊它刪除過濾器的類型。(我希望是有道理的)

感謝您的任何幫助。

+0

問題太模糊了。 – 2009-11-12 15:42:56

+0

基本上,我想創建與buysellads相同的功能,但我不知道從哪裏開始,或者如何根據輸入進行過濾。 – Spyderfusion02 2009-11-12 15:54:33

回答