So i'm a completely rookie at AJAX so I was wondering if someone could help.
I'd like to get this, SQL command to be activated onkeyup:
SELECT * FROM commands WHERE tag=$_POST['search_input']
This is the current code I have for the form:
<form method="post">
<input class="search_input" type="text" name="search_input" placeholder="Search..." onkeyup="suggest()" autocomplete="off" />
</form>
Current jQuery:
$(document).ready(function() {
$('.search_input').keypress(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
function handleKeyPress(e,form){
var key=e.keyCode || e.which;
if (key==13){
form.submit();
return false;
}
}
});
the function suggest() is what I'd like your guy's help on. To send the command above on a keypress.
Use $.post(). You have here examples http://api.jquery.com/jquery.post/
The basic structure is
$.post(url(string), data(object), function(response){ /* do something */ });
A delay between inputs would be really good so it won't continuously send requests to the server. You may also want to use keyup instead of keypress, test it and you'll see why.
I would recommend to use...
HTML
<form method="post">
<input class="search_input" type="text" name="search_input" placeholder="Search..." autocomplete="off"/>
</form>
JS
// shorthand for document ready
$(function(){
var $input = $('.search_input');
// using on-function (see jQuery Docs)
// bind event instead of using on-attribute (nicer)
// bind input event instead of keyup, because it will fire on paste too
$input.on('input', function(evt){
$.ajax({
// maybe use GET?
type: 'POST',
url: '/yourQueryPath',
// assign the input value to the needed query parameter
data: {'search_string': $input.val()},
success: function(response){
// whatever you want to to with your response
}
)};
});
});
Additionally a hint: Never use unfiltered user input like your SQL does (MySQL-Injection)! E.g. if you are with PHP please use filter_input() and mysql_real_escape_string() or simliar.