gpt4 book ai didi

javascript - 如果用户想稍后填充这个特定的文本框,JQuery UI 自动完成菜单将在鼠标移出时重置

转载 作者:行者123 更新时间:2023-11-30 05:39:47 25 4
gpt4 key购买 nike

鼠标悬停时,列表显示,当用户单击列表中的一项时,文本框应该填充所选项目。自动完成显示在鼠标悬停时。但是,如果用户改变主意并决定稍后填写文本框,则 mouseout 应该关闭菜单。这也是 mouseout 正在做的事情 - 但它目前阻止用户从自动完成菜单中选择某些东西,如果他/她想立即填充它。如果用户不小心选择了错误的项目并希望菜单在鼠标悬停时重新出现以更正选择,那也很棒。欢迎任何建议。谢谢。

JFiddle:http://jsfiddle.net/KarlosFanta/bc9SR/3/

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [ "Battleship", "Tank", "Bazooka"];
$( "#lst" ).autocomplete({
source: availableTags,
minLength: 0
}).mouseover(function() {
$(this).autocomplete("search");

//if mouse hovers away from the menu and the textbox- only then the mouseout function should fire
//this mouseout below is preventing me from selecting the menu:
}).mouseout(function() {
$(this).autocomplete( "close" );
});
});
</script>
</head>
<body>

<input id="lst" >

</body></html>

最佳答案

试试这个,演示链接 http://jsfiddle.net/dhana36/bc9SR/4/

        $(function() {
var availableTags = [
"Battelship",
"Abracadabra"
];
$( "#lst" ).autocomplete({
source: availableTags,
minLength: 0
}).mouseover(function() {
$(this).autocomplete("search");

/* if mouse hovers away from the menu and the textbox-
only then the mouseout function should fire
this mouseout below is preventing me from selecting the menu:
*/
}).mouseout(function() {
var isHovered = $('ul.ui-autocomplete:hover').length > 0
console.log(isHovered)
if(!isHovered){
$(this).autocomplete( "close" );
};


});

setInterval(function(){
var isinputHovered = $('#lst:hover').length > 0
var isHovered = $('ul.ui-autocomplete:hover').length > 0
if(!isHovered && !isinputHovered) {
$('#lst').autocomplete( "close" );
}

}, 200);
});

关于javascript - 如果用户想稍后填充这个特定的文本框,JQuery UI 自动完成菜单将在鼠标移出时重置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21499217/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com