How can I turn this jQuery click function to a keyup function? - php

Question

So basically I have a intranet for a business where the employees can login and do various tasks. In order to inprove efficency I have implemented what I am calling the "QuickTask" feature where the employees can select a task via a drop down menubefore they log in so it can go straight to it. Due to there being various departments, I have made a script where the employees can type in their username and press the submit button it populates the list of tasks relevant to their department, this is only temporary as the submit button needs to be used to actually login. However, I would like to change this so the list would populate as they type their username. How could I do this?
I have 3 files.
1. index.php (Log in page)
2. quickTask.js (jQuery function)
3. determine_department.php (The file quickTask.js is communicating with)
Here is the code:
index.php:
<form action="javascript:void(0);" method="post">
Username: <input type="text" id="username" name="username" /><br />
Password: <input type="password" name="password" /><br />
<i>QuickTask:</i><div id="quickTask"></div>
<br />
Forgot Password?<br />
<input class="test" type="submit" id="thing" value="Log In" />
</form>
quickTask.js
$(document).ready(function() {
$('input#thing').on('click', function() {
var username = $('input#username').val();
if ($.trim(username) != '') {
$.post('../inc/determine_department.php', {
username: username
}, function(data) {
$('div#quickTask').html(data);
});
}
});
});
determine_department.php:
<?php
$username = $_POST['username'];
if(isset($username) === true && empty($username) === false) {
mysql_connect("localhost", "root", "24Bottlesofgin24");
mysql_select_db("intranet");
$sql = "SELECT DEPARTMENT FROM `employees` WHERE USERNAME='$username'";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)){
$depID = $row['DEPARTMENT'];
}
$sql2 = "SELECT * FROM `quicktask` WHERE DEP_ID='$depID'";
$result2 = mysql_query($sql2);
echo "<select name=\"QT\">";
echo "<option value=\"\" selected=\"selected\" disabled>-- Please Pick One --</option>";
while($row2 = mysql_fetch_array($result2)){
echo "<option value=\"" . $row2['DEP_ID'] . "\">" . $row2['TASK'] . "</option>";
}
echo "</select>";
}
?>
Here is a live example:

Answer 1

Here is what you want, converted from How to delay the .keyup() handler until the user stops typing? to your needs. It will run the query if/when the user stops typing for 200 ms, the time is set by the second parameter to delay, you can have it for any amount of time you like. However, I am really with those who suggest using an autofill plugin - why reinvent the wheel?
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function() {
$('input#username').on('keyup', function() {
delay(function(){
var username = $('input#username').val();
if($.trim(username) != '') {
$.post('../inc/determine_department.php', {username: username}, function(data){
$('div#quickTask').html(data);
});
}
},200)
});
});

Answer 2

$('input#username').on('keyup', function() {...});
but better be sure to only run a single ajax request at a time.

Answer 3

Change
$('input#thing').on('click', function() {
to
$('input#username').on('keyup', function() {
Should do it, you want the keyup event on the #username input instead of the click event of #thing

Answer 4

Basically, the click function will still them same. You just need to affect it to the keyup event of your username input :
$('#username').keyup( function() {
var username = $('input#username').val();
if($.trim(username) != '') {
$.post('../inc/determine_department.php', {username: username}, function(data){
$('div#quickTask').html(data);
});
}
});

Answer 5

javascript:
$('input#thing').keyup(function()
mysql:
$sql = "SELECT * FROM `quicktask` WHERE DEP_ID IN (SELECT DEPARTMENT FROM `employees` WHERE USERNAME like '".$username."%')";
$result = mysql_query($sql);
echo "<select name=\"QT\">";
echo "<option value=\"\" selected=\"selected\" disabled>-- Please Pick One --</option>";
while($row = mysql_fetch_array($result)){
echo "<option value=\"" . $row['DEP_ID'] . "\">" . $row['TASK'] . "</option>";
}
echo "</select>";