我有一个 jQuery UI 自动完成列表，希望在单击输入字段或图标时打开和关闭它。 当我单击页面上的其他任何位置时，自动完成功能会自动关闭。这很好。但是:我不希望当我点击我的图标时触发这种关闭自动功能。目前，当列表打开并单击图标时，列表首先关闭(由于自动性)，然后立即重新打开。
我可以以某种方式阻止仅在单击图标时自动关闭吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class=container>
<span id="regionGlyph" class="glyphicon glyphicon-chevron-right "></span>
<input id="regionIn" type="text" class="form-control">
</div>
<script>
$(document).ready( function() {
var availableTags =
["Aach (BW)",
"Aachen (NW)",
"Aalen (BW)",
"Abenberg (BY)",
"Abensberg (BY)",
"Achern (BW)",
"Achim (NI)",
"Adelsheim (BW)",
"Adenau (RP)",
"Adorf/Vogtl. (SN)",
"Ahaus (NW)",
"Ahlen (NW)",
"Ahrensburg (SH)",
"Aichach (BY)",
"Aichtal (BW)",
"Aken (Elbe) (ST)",
"Albstadt (BW)",
"Alfeld (Leine) (NI)",
"Allendorf (Lumda) (HE)",
"Allstedt (ST)",
"Alpirsbach (BW)",
"Arnsberg (NW)"];
var closed=true;
$( "#regionIn" ).autocomplete({
source: availableTags,
minLength: 0,
close: function(){
closed=true;
},
search: function(){
closed=false;
}
})
.click(function() {
if (closed){
$(this).autocomplete('search');
} else {
$(this).autocomplete('close');
};
});
$("#regionGlyph").click(function(){
$("#regionIn").trigger("click");
});
});
</script>
</body>
</html>
这是一个jsfiddle .
最佳答案
我已经更新了你的 fiddle 。你可以在这里查看。现在正在工作。只是用了一些小技巧。 https://jsfiddle.net/6e2mtr69/4/
$(document).ready(function() {
var availableTags = ["Aach (BW)",
"Aachen (NW)",
"Aalen (BW)",
"Abenberg (BY)",
"Abensberg (BY)",
"Achern (BW)",
"Achim (NI)",
"Adelsheim (BW)",
"Adenau (RP)",
"Adorf/Vogtl. (SN)",
"Ahaus (NW)",
"Ahlen (NW)",
"Ahrensburg (SH)",
"Aichach (BY)",
"Aichtal (BW)",
"Aken (Elbe) (ST)",
"Albstadt (BW)",
"Alfeld (Leine) (NI)",
"Allendorf (Lumda) (HE)",
"Allstedt (ST)",
"Alpirsbach (BW)",
"Arnsberg (NW)"
];
var closed = true;
$("#regionIn").autocomplete({
source: availableTags,
minLength: 0,
close: function() {
closed = true;
$('#regionGlyph').show();
$('#regionGlyph_1').hide();
},
search: function() {
closed = false;
$('#regionGlyph_1').show();
$('#regionGlyph').hide();
}
})
.click(function() {
if (closed) {
$(this).autocomplete('search');
} else {
$(this).autocomplete('close');
};
});
$("#regionGlyph").click(function() {
$('#regionIn').autocomplete('search');
});
});
这里是 html，只是做了一些小改动
<div class=container>
<span id="regionGlyph" class="glyphicon glyphicon-chevron-right "></span>
<span id="regionGlyph_1" style="display:none" class="glyphicon glyphicon-chevron-right "></span><br>
<input id="regionIn" type="text" class="form-control">
</div>
关于javascript - jQuery:自动完成，单击按钮时不关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42530541/