Hello and thank you for taking the time to read my question.
My website is hosted on Godaddy and I have the "Deluxe Linux Hosting package".
My webpage helps users to find markets using a simple form, which uses JQuery, Ajax, PHP and MySQL to show suggestions relevant to their search term.
I am using an autocomplete function in a the search field so that when users type in their search term, the relevant suggestions appear below the input field in a div with the id 'list_area'.
The suggestions are being populated by JQuery and a PHP script, which is being fed the search terms via the AJAX "Post" method (now the AJAX method as I wanted to log the errors to the console).
Here is where the js script is called in the HTML page:
<input autocomplete="off" type="text"
class="form-control input-lg" name="market_search"
id="market_search" placeholder="Enter a market name"
onkeyup="autoComplete();">
There is also a preventDefault function on the same page to prevent the form from being submitted without a search term:
<script>
$( "#search_form" ).submit(function(e) {
if( $('#market_search').val() =='' ){
e.preventDefault();
}
});
</script>
Here is Autocomplete.js
function autoComplete()
{
var list_area = $('#list_area');
var min_length = 1;
var search_term = $('#market_search').val();
if (search_term.length >= min_length) {
$.ajax({
type: 'POST',
url: 'assets/scripts/search_markets.php',
data: {
search_term: search_term
},
success: function(data){
list_area.hide().html(data).fadeIn('fast');
console.log(status);
},
error: function(xhr, textStatus, error){
alert("Unable to retrieve data. Please try again.");
console.log(xhr.statusText);
console.log(textStatus);
console.log(error);
}
});
}else{
list_area.hide();
}
}
function set_item(item) {
// change input value
$('#market_search').val(item);
// hide proposition list
$('#list_area').hide();
}
Here is search_markets.php
<?php
include("connect_to_mysql.php");
$output = '';
$search_term = mysql_real_escape_string($_POST['search_term']);
$sql = mysql_query("
SELECT name FROM markets
WHERE name LIKE '%$search_term%'
ORDER BY name LIMIT 0,10
");
$num_rows = mysql_num_rows($sql);
if($num_rows > 0){
$output .= '<ul>';
while($row = mysql_fetch_array($sql)){
$market_name = $row['name'];
$market_name = preg_replace('/\s{2,}/u', ' ', $market_name); // replaces large spaces with single space between words
$output .='<li onclick="set_item(\''.str_replace("'", "\'", $market_name).'\');">'.$market_name.'</li>';
}
$output .= '</ul>';
}
echo($output);
mysql_close($mysql_conn);
?>
The code behaves as you would expect and returns a list of suggestions in the #list_area div.
However, if you use the search field too much within the space of around 30 seconds - i.e. you type in a letter, delete the letter, type in a letter, and do so a few times etc etc - the suggestions stop appearing and the site becomes temporarily unavailable should you try to navigate to the homepage.
This error shows up: "The connection was reset"
And in Chrome I get the error: "net::ERR_EMPTY_RESPONSE"
In Firefox, I don't get that error code, it just highlights the attempted connection to search_markets.php in red, and no more details are given.
I put the question here as I am a bit of a novice, and unsure how to even begin searching for a solution; google searches on the errors in relation to my situation have not been much help, and I am unsure if it is a server issue, a browser issue, or a code issue.
Much thanks in advance for any help you can offer.