私はAjaxを使用してフィルター処理された検索システムを作成しています。ユーザーが名前、カテゴリ、場所で検索できる3つの異なるタブがあります。ユーザーが検索ボックス(tab-1)に名前を入力すると検索できます。2番目のタブでは、同じAjaxをどのように使用できますか?ユーザーがリンクをクリックすると、IDがajaxスクリプトで私のphpに渡され、そのIDが私のmysqlクエリでvaribaleとして渡されます。
初めてAjaxを使用する場合は、ご協力いただければ幸いです。
AJAXスクリプト:
$(document).ready(function () {
$("#search_results").slideUp();
$("#button_find").click(function (event) {
event.preventDefault();
search_ajax_way();
});
$("#search_query").keyup(function (event) {
event.preventDefault();
search_ajax_way();
});
});
function search_ajax_way() {
$("#search_results").show();
var search_this = $("#search_query").val();
$.post("search.php", {
searchit: search_this
}, function (data) {
$("#display_results").html(data);
})
}
html:
<form id="searchform" method="post">
<input id="search_query" name="search_query" placeholder="What You Are Looking For?"
size="50" type="text" />
<input id="button_find" value="Search" type="submit" />
</form>
<div id="display_results">
</div>
<div class="tab">
<input id="tab-2" name="tab-group-1" type="radio" />
<label for="tab-2">Search by Category</label>
<div class="content">
<div id="searchbycategory">
<div id="nav_1_a">
<ul>
<li><a href="#">All Categories</a></li>
<li><a href="#" id="dummy">Category-1</a></li>
<li><a href="#">Category-2</a></li>
<li><a href="#">Category-3</a></li>
</ul>
<div id="display_results">
</div>
</div>
<!-- END nav_1_a -->
</div>
</div>
</div>
<div class="tab">
<input id="tab-3" name="tab-group-1" type="radio" />
<label for="tab-3">Search by location</label>
<div class="content">
<div id="searchbylocation">
<div id="nav_1_a">
<ul>
<li><a href="#">All</a></li>
<li><a href="#">Location-1</a></li>
<li><a href="#">Location-2</a></li>
<li><a href="#">Location-3</a></li>
<li><a href="#">Location-4</a></li>
</ul>
</div>
search.php:
<?php
$connection = mysql_connect('localhost', 'user', 'pwd');
$db = mysql_select_db('db', $connection);
$term = strip_tags(substr($_POST['searchit'],0, 100));
$term = mysql_escape_string($term);
echo "Enter name to search";
else{
$sql = mysql_query("select col1,col2 from tab2 where tab2.somecolm like
'{$term}%'", $connection);
echo "<ul>";
if (mysql_num_rows($sql)){
while($info = mysql_fetch_array($sql, MYSQL_ASSOC ) ) {
echo "<li>";
echo "<a href=\"http://" . $info['col1'] . ".html\">" . $info['col2'] . "</a>";
echo "</li>";
}
}else{
echo "No matches found!";
}
echo "</ul>";
}
?>