Филтър за търсене в сайт (PHP и JavaScript)

В този пост ще Ви покажа как да направите филтър за търсене на информация във Вашия сайт. Първото нещо което трябва да направите е си създадете Вашата HTML форма, в която да заложите всички критерии, с които ще се извършва търсенето. Ето една примерна форма:

<form id=”searchingFilter”>

<label for=”criteri_1″>Критерийй 1:</label>
<select name=”criteri_1″ class=”srcr”>

<option value=”0″>All</option>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>

</select>
<label for=”criteri_2″>Критерийй 2:</label>
<select name=”criteri_2″ class=”srcr”

<option value=”0″>All</option>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>

</select>
<label for=”criteri_3″>Критерийй 3:</label>
<select name=”criteri_3″ class=”srcr”>

<option value=”0″>All</option>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>

</select>

<input type=”submit” value=”изпрати” />

</form>

Имаме 3 select елемента чрез които ще се задават нашите критерии за търсене.

Следващото нещо което ни е необходимо това е JavaScript кода, който ще събира всички зададени критерии от нашите select елементи, ще ги поставя в един JavaScript обект и последствие ще ги изпраща чрез Ajax заявка към скрипт намиращ се на сървъра. Ето и необходимия ни код:

<script type=”text/javascript”>

$(‘#searchingFilter’).submit(function($e){

$e.preventDefault();

//създаваме собствен обект
var myobj = new Object();

//вземаме стойностите на всички select елементи

$(‘select.srcr’).each(function(){

myobj[($(this).attr(“name”))] =$(this).val();

});

var json = JSON.stringify(myobj);

//извършваме Ajax заявка към serverScript.php
$.post(“serverScript.php”,{‘myobj’:json},function(returned_data){

eval(“var data =”+returned_data);

console.log(data.result);

});

});

</script>

Разбира се във филтъра за търсене може да се включат и други HTML елементи за входни данни. За някои от тях, които приемат текст набран от клавиатурата може да се наложи да направите верификация.

Последната част от филтъра ни за търсене е PHP частта (т.е. съдържанието на файла serverScript.php).

<?php

require_once ‘DBConnection.php’;

//вземаме нашия обект изпратен от JS
$result = jsonString2Object($_POST[‘myobj’]);

$query =”SELECT * FROM table WHERE

field1 LIKE ‘%”.$result->criteri_1.”%’ AND
field2 LIKE ‘%”.$result->criteri_2.”%’ AND
field3 LIKE ‘%”.$result->criteri_3.”%’ ‘”;

$result = mysql_query($query) or die(mysql_error());

//създаваме php масив 
$arr_obj = array();
$arr_obj[‘rows’] = mysql_num_rows($result);

if($arr_obj[‘rows’] > 0) $arr_obj[‘rows’]  = ‘Намерани са ‘.$arr_obj[‘rows’].’ записа’;

else $arr_obj[‘rows’] = ‘Няма намерени данни’;

//връщаме php масива съдържащ резултата

echo json_encode($arr_obj);

?>

Ако всичко е наред след задаване на критериите и натискането на бутона “изпрати” трябва да получите съобщение в конзолата за броя на откритите резултати в Базата Данни.

Едно малко допълнение за по-начинаещите. В заявката към базата дани

$query =”SELECT * FROM table WHERE

field1 LIKE ‘%”.$result->criteri_1.”%’ AND 
field2 LIKE ‘%”.$result->criteri_2.”%’ AND
field3 LIKE ‘%”.$result->criteri_3.”%’ ‘”;

на мястото на table поставете името на Вашата таблица, в която ще търсите записи. На местата на field1,field2,field3 поставете имената на колоните от таблицата, за които се извършва търсенето.

4 thoughts on “Филтър за търсене в сайт (PHP и JavaScript)

  1. Само да отбележа че кода работи и това с json предаването на данните между браузъра и сървъра е много готино и полезно. благодаря…

Leave a Reply

Your email address will not be published. Required fields are marked *