I'm trying to use jQuery UI Autocomplete to bring up a list of names of people in a MySQL Database. The basic function is working - when you type in two or more letters a list of possible names is displayed - but when I hover the mouse over the list or press the down key to access the list, it disappears (2 screenshots below may help to explain this).
What this means is that the Autocomplete becomes pointless as I can't actually access the list! If anyone can help I'd be most appreciative! Screenshots and code are posted below.
Type in the first few characters and the menu appears
But hover the mouse or press the 'down' key and it disappears before a selection can be made
HTML:
<div id="chooseaccount">
Choose Account to Edit
<div id="iechooseaccountlabel" class="labeldiv">
<!--[if IE]>
Enter Student Name
<![endif]-->
</div>
<input type="text" class="inputs" id="editname" placeholder="Enter Student Name" />
</div>
jQuery:
$(document).ready(function(){
$("#editname").autocomplete({
source: "names.php",
minLength: 2,
});
});
PHP:
<?php
$mysqli = new mysqli('********', '********', '**********', '*********');
$text = $mysqli->real_escape_string($_GET['term']);
$query = "SELECT name FROM users WHERE name LIKE '%$text%' ORDER BY name ASC";
$result = $mysqli->query($query);
$json = '[';
$first = true;
while($row = $result->fetch_assoc())
{
if (!$first) { $json .= ','; } else { $first = false; }
$json .= '{"value":"'.$row['name'].'"}';
}
$json .= ']';
echo $json;
?>