Best IT Recipes

JQuery UI Autocomplete - menu disappears when it hangs

I am trying to use jQuery UI Autocomplete to open a list of people names in a MySQL database. The main function works - when you enter two or more letters, a list of possible names is displayed, but when I hover over the list or press the down key to access the list, it disappears (2 screenshots below may help explain this).

This means that autocompletion becomes meaningless, as I cannot access the list! If anyone can help, I will be very grateful! Screenshots and code are posted below.

Enter the first few characters and a menu will appear.

Screen shot 1

But hover or press the down key and it will disappear before you can make a choice.

Screenshothot 2

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; ?>
+60
jquery html jquery-ui jquery-ui-autocomplete
Feb 07 '13 at 9:56
source share
6 answers

The error occurs due to a conflict that occurs when two jQuery UI files are downloaded simultaneously to the client browser. If you reach the peak in the <head> section, you will probably see that there are two different jQuery UI files on it. Just delete it and it will work.

+198
Feb 26 '13 at 12:14
source share

I had the same problem, but I only have one jquery-ui script tag in the DOM at a time. I downloaded content using Ajax, which included a script tag. If I did this twice on the same page, it would break the autocomplete popup, although the contents of the second request replaced the contents of the first. One way is to add this line before displaying the content containing the jquery-ui script:

$.ui = null;

+4
Apr 21 '15 at 22:49
source share

This error occurs when two jQuery UI files are downloaded to your browser at the same time. This can lead to jquery conflict. Delete the unused jquery user interface file to resolve this error.

In my case, the jquery-ui.min.js file was inadvertently included from the data folder. To remove it, I added one code to the components in config / main.php

  'clientScript' => array( 'scriptMap' => array( 'jquery-ui.min.js' => false, )),
+4
Feb 16 '16 at 7:51
source share

The jquery file that is loaded into your header contains the entire user interface element, and the one that is automatically added to your file has a children element that does not need to be loaded, so it should be deleted.

+1
Feb 17 '16 at 5:39
source share

I had the same problem and I did not use jQuery UI twice, my jquery UI was part of jquery DataTable.
My problem was solved with the following code
Note: with this code we need to write a code to close UL when we do not click on UL

 $(".gettingContactList").autocomplete({ source:this.contactList, /*following focus function was written because when mouse was being hovered over the menu, the menu was disappearing*/ focus:function(e,ui) { $(e.toElement).parents().show() } })
+1
Jul 05 '17 at 9:31 on
source share

I had a similar problem with typeahead

I used focus () and the problem was resolved.

Example:

 $(ele).typeahead({source: $scope.varMap['abc'], items: undefined}); $(ele).focus();
0
Jul 03 '19 at 20:10
source share


More articles:


All Articles