JQuery Instant Search by Several Parameters

[smus]

I've got an Instant Search (livesearch) on PHP+JQuery that receives the data from MySQL table by one parameter. I need to create an advanced version of it: with complementary checkboxes inside the html-form. Could anyone at least briefly explain the algorithm of the script? Should I put checkbox values into an array? What should I change on javascript code?

[justsomeguy]

That's pretty vague without any code. You can use jQuery to get the checked boxes and submit that data along with the other data, and then PHP can check to see if any of those boxes were selected.

[smus]

form.php

<script>

function showHint(str)

{

if (str != "")

{

$.post("search.php", {ls:str}, function(data)

{

$("#results").empty().append(data);

});

}

else

{

$("#results").empty();

}

}

</script>

<form onsubmit="showHint(document.getElementById('txt').value);return false" method="post" action="test.php">

<table align="center">

<tr>

<td align="center">

<input type="search" id="txt" name="ls" onkeyup="showHint(this.value)" onkeydown="showHint(this.value)" autofocus autocomplete="off">

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="p[]" checked>p1

<input type="checkbox" name="p[]">p2

<input type="checkbox" name="p[]">p3

</td>

</tr>

</table>

</form>

<span id="txtHint"></span>

<div id="results"></div>

search.php

include("dbconfig.php");

$ls=$_POST['ls'];

$sql=mysql_query("SELECT * FROM companies WHERE name LIKE '" .$ls. "%' ") or die(mysql_error());

$i=0;

$rowsnumber=mysql_num_rows($sql);

while($row=mysql_fetch_array($sql))

{

echo $row['name'];

}

[smus]

I've given the checkboxes array names. Is that right? Or it's not necessary for jQuery? Could you please tell me where I have to change the code?

[justsomeguy]

I think that jQuery will escape the brackets in the names, it's probably better to give each value a different name. This is the line where you send data to PHP:$.post("search.php", {ls:str}, function(data)That line only sends a value called ls. That's what you need to change to add the check box values. You can add some jQuery code to get the checkboxes and determine if each one is checked, and add those values to the data that gets sent to PHP.

[smus]

I think that jQuery will escape the brackets in the names, it's probably better to give each value a different name. This is the line where you send data to PHP:$.post("search.php", {ls:str}, function(data)That line only sends a value called ls. That's what you need to change to add the check box values. You can add some jQuery code to get the checkboxes and determine if each one is checked, and add those values to the data that gets sent to PHP.

Thanks! I got the idea. But the problem I'm new in JS and JQ, could you please provide a example code? And to the checkboxes: should I name them p1,p2,p3 instead of an array name? Is that right?

Edited March 10, 2015 by smus

[justsomeguy]

And to the checkboxes: should I name them p1,p2,p3 instead of an array name? Is that right?

Since you're submitting via ajax I wouldn't give them a name at all, just an ID. You can get each checkbox by ID, determine if it's checked, and send those values with the ajax request.

But the problem I'm new in JS and JQ, could you please provide a example code?

I'm not going to write your code for you, but I'm happy to help you learn. What do you have so far? Have you gone through any of the Javascript or jQuery tutorials?

[smus]

I'm not going to write your code for you, but I'm happy to help you learn. What do you have so far? Have you gone through any of the Javascript or jQuery tutorials?

Anyway thanks for your help!

Well, I've given the checkboxes usual names but also I've created an array a with 6 values (the amount of checkboxes):

var a = [ 0,1,2,3,4,5 ]

that gets to know whether a checkbox is checked or not. Now I need to send it to search.php, the file that process the data. Should I place it in here as a second parameter of the function?

 $.post("search.php", {ls:str, a[]}, function(data)  

And do I have to catch it in search.php this way(as usual)?

$a[]=$_POST['a'];

[justsomeguy]

You should send a string, so maybe join the array values on commas and then split them up in PHP.

 {ls:str, a:a.join(",")}...$a = explode(',', $_POST['a']);

[smus]

Success! I've sent the values, but in a slightly different way. IMHO, it looks a little bit stupid, but I've created new vars and give them the values of the array so that they would succesfully be transferred to search.php! Now I need to form an appropriate SQL-query, not knowing in advance, how many parameters my search demands. This is actually a reason why I mentioned an array creation. I don't understand exactly how to check the values of the received variables. I've got several of them each of which has 0(zero) value if checkbox is not checked and 1 value if it is checked. So this is what in my proccessing file:

   $ls=$_POST['ls']; // what to find   $cb1=$_POST['cb1']; // checkbox values (either 0 or 1)   $cb2=$_POST['cb2'];   $cb3=$_POST['cb3'];   $cb4=$_POST['cb4'];   $cb5=$_POST['cb5'];   $cb6=$_POST['cb6'];   $sql=mysql_query("SELECT * FROM tablename WHERE fieldname LIKE '" .$ls. "%' ") // sql-query

Now I need to dynamically change the field names and their number.

 

Edited March 12, 2015 by smus

[justsomeguy]

You need to build the query in a string. You'll need to have an if statement for each variable to check the value and determine whether you need to add something to the query.

[smus]

Thank you very much! It works! I've done it by adding values to an array an then by using 'implode' function with 'UNION' SQL-connector and by placing the queries to a string!