0
나는 buysellads.com이 사용하는 here과 비슷한 키워드로 필터링 할 웹 페이지의 입력 상자를 구현할 수있는 방법을 찾고있었습니다. 사이트와 관련된 키워드를 입력하면 목록을 자동으로 필터링합니다. 예를 들어, '포토샵'을 입력하면 포토샵으로 태그를 포함한 모든 사이트를 가져옵니다.키워드로 필터링 jquery
'포토샵'으로 필터링 할 때 추가 버튼을 누른 후에도이 기능을 구현하고 싶다면 포토샵이라는 단어가 입력란 아래에 '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"그것을 클릭하면 필터를 삭제를 표시하는 입력 (고베)의 형태를하고 싶습니다. (나는 희망 만든 의미)
도움 주셔서 감사합니다.
질문이 너무 모호합니다. –
기본적으로 buysellads가했던 것과 똑같은 것을 만들고 싶습니다. 그러나 입력을 기반으로 필터링을 시작하거나 시작하는 방법을 알지 못합니다. – Spyderfusion02