Menu
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;
?>
476
The error is caused because of a conflict that occurs when two jQuery UI files are loaded into the client's browser at the same time. If you peak into your <head> section you will probably see you have two different jQuery UI files referenced there. Just remove one and it will work.
83
I had the same problem, but I only ever had one jquery-ui script tag in the DOM at a time. I was loading content with Ajax that included the script tag. If I did that twice on one page, it would break the autocomplete dropdown, even though the content of the second request was replacing the content of the first. One workaround is to add this line before rendering content containing the jquery-ui script:
$.ui = null;
20
This error is caused when two jQuery UI files are loaded into your browser at the same time.This may cause jquery conflict. Remove the unused jquery UI file to solve the error.
In my case jquery-ui.min.js file was unintentionally included from assets folder.To remove it i added one code in components in config/main.php
'clientScript' => array(
'scriptMap' => array(
'jquery-ui.min.js' => false,
)),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
