I am trying to create a live search using ajax, jquery, php and mysql. The user enter some inputs, it send the search to form_livesearch.php. I got that part worked. Else if the input is empty, then display other query. (I need help with this part)
JavaScript
x
56
56
1
<div id="container" class="col-md-12"> 2
<div class="row">3
<h2>Quick Search</h2>4
<input class='form-control' type="text" id='live_search' placeholder='Search our inventory'>5
6
<br>7
<br>8
9
<h2 class="" id="searchresult"> 10
</h2> 11
</div>12
</div> 13
14
15
$(document).ready(function(){16
17
$("#live_search").keyup(function(){18
19
var input = $(this).val();20
21
22
if(input != ""){23
24
$.ajax({25
26
url:"form_livesearch.php",27
method:"POST",28
data:{input:input},29
30
success:function(data){31
32
$("#searchresult").html(data);33
$("#searchresult").css("display","block");34
35
} 36
37
38
});39
40
41
42
} else {43
44
// If the input field is empty45
// How display another php query here?46
47
}48
49
50
51
});52
53
54
55
}); 56
Here is the php and mysql I am trying to display when the input field is empty.
JavaScript
1
44
44
1
<?php 2
3
4
$query = "SELECT * FROM `my_db` . `my_table` WHERE s_category = 'policy' ORDER BY id ASC";5
6
$result = mysqli_query($db,$query);7
8
if(!$result){9
10
die("Query Failed " . mysqli_error($db));11
12
} 13
14
if(mysqli_num_rows($result) > 0){15
?>16
17
<h3>Policies</h3>18
<ul>19
20
<?php21
22
while($row = mysqli_fetch_assoc($result)){23
24
$id = $row['id'];25
$s_url = $row['s_url'];26
$s_name = $row['s_name'];27
$s_category = $row['s_category']; 28
29
?>30
31
<li><a href="<?php echo $s_url ?>"><?php echo $s_name?></a> <img src="https://www.xxxxxxx.xxx/xxxx/images/pdf.gif" alt="PDF"></li>32
33
<?php34
}35
?>36
37
</ul>38
39
<?php40
41
}42
43
?> 44
form_livesearch.php:
JavaScript
1
68
68
1
if(isset($_POST['input'])){2
3
$input = $_POST['input'];4
5
//to prevent from mysqli injection6
// x'='x7
$input = stripcslashes($input);8
$input = mysqli_real_escape_string($db, $input);9
10
$input = str_replace('%', ' @', $input);11
$input = str_replace("'", ' @', $input);12
13
$query = "SELECT * FROM `my_db` . `my_table` WHERE s_name LIKE '%{$input}%' ORDER BY id ASC";14
15
$result = mysqli_query($db,$query);16
17
if(mysqli_num_rows($result) > 0){?>18
19
<table class="table table-bordered table-striped mt-4">20
<!--21
<thead>22
<tr>23
<th>id</th>24
<th>name</th>25
</tr>26
</thead>27
-->28
<tbody>29
<?php30
31
while($row = mysqli_fetch_assoc($result)){32
33
$id = $row['id'];34
$s_url = $row['s_url'];35
$s_name = $row['s_name'];36
$s_category = $row['s_category'];37
38
39
40
?>41
42
<tr>43
<td style="font-size: 14px;"><a href="<?php echo $s_url; ?>"><?php echo $s_name;?></a> <img src="https://www.xxxxx.xxxx/xxxxx/images/pdf.gif" alt="PDF"></td>44
</tr>45
46
47
48
<?php49
}50
51
52
?>53
</tbody>54
</table>55
56
57
<?php 58
59
}else{60
61
echo "<h6 class='text-danger text-center mt-3'>No data Found</h6>";62
}63
64
} 65
66
67
?>68
Advertisement
Answer
You should handle this stuff in the PHP file. and by the way, the input can not be empty as you put the ajax in keyup event.
it just happened when the user use the backspace to delete what he search.
So the form_livesearch.php PHP file should be something like this.
JavaScript
1
80
80
1
<?php2
3
$servername = "localhost";4
$username = "username";5
$password = "password";6
$dbname = "myDB";7
8
// Create connection9
$conn = mysqli_connect($servername, $username, $password, $dbname);10
11
12
13
$output = "";14
if(isset($_POST['input'])){15
16
$input = $_POST['input'];17
if(!empty($input)){18
19
$input = str_replace('%', ' @', $input);20
$input = str_replace("'", ' @', $input);21
22
$input = "%$input%"; // prepare the $input variable 23
$query = "SELECT * FROM `my_db` . `my_table` WHERE s_name LIKE ? ORDER BY id ASC";24
$stmt = $conn->prepare($query); 25
$stmt->bind_param("s", $input); // here we can use only a variable26
$stmt->execute();27
28
29
}else{30
$query = "SELECT * FROM `my_db` . `my_table` WHERE s_category = 'policy' ORDER BY id ASC";31
$stmt = $conn->prepare($query); 32
$stmt->execute();33
}34
35
$result = $stmt->get_result(); // get the mysqli result36
37
38
if($result->num_rows > 0){ 39
40
if(empty($input))41
$output = '<table class="table table-bordered table-striped mt-4"><tbody>';42
else43
$output = '<h3>Policies</h3><ul>';44
45
while($row = $result->fetch_assoc()){46
47
$id = $row['id'];48
$s_url = $row['s_url'];49
$s_name = $row['s_name'];50
$s_category = $row['s_category'];51
52
53
if(empty($input))54
$output .= '55
<tr>56
<td style="font-size: 14px;"><a href="' . $s_url . '">' . $s_name .'</a> <img src="https://www.xxxxx.xxxx/xxxxx/images/pdf.gif" alt="PDF"></td>57
</tr>';58
else59
$output .= '<li><a href="' . $s_url . '">' . $s_name . '</a> <img src="https://www.xxxxxxx.xxx/xxxx/images/pdf.gif" alt="PDF"></li>';60
61
}62
63
64
if(empty($input))65
$output .= '</tbody></table>';66
else67
$output .= '</ul>';68
69
echo $output;70
71
}else{72
73
echo "<h6 class='text-danger text-center mt-3'>No data Found</h6>";74
}75
76
} 77
78
79
?>80
You can use a separate file to handle 2 types but as they are all about products it’s better to have one file.
It’s a good practice to return the data and let the frontend build the HTML output but if you want to build HTML in the PHP file, it’s better to wrap them in a string.
Also, use the prepare statement of MySQLi to prevent SQL injection. take a look at this example for more information.
And the html file should be something like this:
JavaScript
1
48
48
1
<div id="container" class="col-md-12"> 2
<div class="row">3
<h2>Quick Search</h2>4
<input class='form-control' type="text" id='live_search' placeholder='Search our inventory'>5
6
<br>7
<br>8
9
<h2 class="" id="searchresult"> 10
</h2> 11
</div>12
</div> 13
14
<script type="text/javascript">15
$(document).ready(function(){16
// will execute once the page load17
getData();18
$("#live_search").keyup(function(){19
20
let input = $(this).val();21
getData(input);22
23
});24
}); 25
26
27
function getData(input = ''){28
29
$.ajax({30
31
url:"form_livesearch.php",32
method:"POST",33
data:{input:input},34
35
success:function(data){36
37
$("#searchresult").html(data);38
$("#searchresult").css("display","block");39
40
} 41
42
43
}); 44
45
46
}47
</script>48