jQuery UI 자동 완성-마우스를 올리면 메뉴가 사라집니다.
jQuery UI Autocomplete를 사용하여 MySQL 데이터베이스에있는 사람들의 이름 목록을 가져 오려고합니다. 기본 기능은 작동합니다. 두 개 이상의 문자를 입력하면 가능한 이름 목록이 표시됩니다.하지만 목록 위에 마우스를 올려 놓거나 목록에 액세스하기 위해 아래쪽 키를 누르면 사라집니다 (아래 스크린 샷 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;
?>
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.
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;
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,
)),
The jquery file which is loaded in your header contains all UI element, and the one which automatically gets added in your file, have the children element which does not needed to upload, so you should remove it.
I had same problem and I did not use the jquery UI twice, my jquery UI was part of jquery DataTable.
My problem was solved with following code
Note: with this code we need to write code to close the 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()
}
})I had similar problem with typeahead
focus ()를 사용했고 문제가 해결되었습니다.
예:
$(ele).typeahead({source: $scope.varMap['abc'], items: undefined});
$(ele).focus();
참고 URL : https://stackoverflow.com/questions/14748193/jquery-ui-autocomplete-menu-disappears-on-hover
'developer tip' 카테고리의 다른 글
| 삽입물을 수용하도록 UILabel 크기 조정 (0) | 2020.11.29 |
|---|---|
| Dock 아이콘을 숨기는 방법 (0) | 2020.11.29 |
| / in vi 검색 및 바꾸기? (0) | 2020.11.29 |
| Zip 파일 내에있는 파일에서 콘텐츠 읽기 (0) | 2020.11.29 |
| IntelliJ IDEA 렌더링 오류 (0) | 2020.11.29 |