Javascript jQuery:Autocomplete，don'；点击按钮时不要关闭_Javascript_Jquery_Html_Jquery Ui

Javascript jQuery:Autocomplete，don'；点击按钮时不要关闭

javascript jquery html jquery-ui

Javascript jQuery:Autocomplete，don'；点击按钮时不要关闭,javascript,jquery,html,jquery-ui,Javascript,Jquery,Html,Jquery Ui,我有一个jQueryUIAutoComplete列表，希望在点击输入字段或图标时打开和关闭它。当我单击页面上的任何其他位置时，“自动完成”将自动关闭。这很好。但是：我不想在我点击图标时触发自动关闭。此时，当列表打开时，我单击图标，列表首先关闭（由于自动），然后立即重新打开我是否可以阻止仅在单击图标时自动关闭 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"&g

我有一个jQueryUIAutoComplete列表，希望在点击输入字段或图标时打开和关闭它。当我单击页面上的任何其他位置时，“自动完成”将自动关闭。这很好。但是：我不想在我点击图标时触发自动关闭。此时，当列表打开时，我单击图标，列表首先关闭（由于自动），然后立即重新打开

我是否可以阻止仅在单击图标时自动关闭

<!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>


...
$（文档）.ready（函数（）{
var availableTags=
[“Aach（BW）”，
“亚琛（西北）”，
“阿伦（BW）”，
“Abenberg（BY）”，
“Abensberg（BY）”，
“瘦果（BW）”，
“阿希姆（尼）”，
“阿德尔斯海姆（BW）”，
“阿迪诺（RP）”，
“Adorf/Vogtl（SN）”，
“阿豪斯（西北）”，
“阿伦（西北）”，
“阿伦斯堡（上海）”，
“艾哈奇（BY）”，
“艾希塔尔（BW）”，
"阿肯(易北河)(圣)",，
“Albstadt（BW）”，
“阿尔菲尔德（莱因）（NI）”，
“阿连多夫（卢姆达）（他）”，
“奥尔斯特德（ST）”，
“阿尔皮尔斯巴赫（BW）”，
“阿恩斯伯格（西北）”；
var闭合=真；
$（“#regionIn”）。自动完成({
资料来源：availableTags，
最小长度：0，
关闭：函数（）{
关闭=真；
},
搜索：函数（）{
关闭=错误；
}
})
。单击（函数（）{
如果（关闭）{
$（this.autocomplete（'search'）；
}否则{
$（this.autocomplete（'close'）；
};
});
$（“#regionGlyph”）。单击（函数（）{
$（“#regionIn”）。触发（“单击”）；
});
});

这是一个。我已经更新了你的小提琴。你可以在这里结账。现在开始工作了。只是耍了些小把戏。

下面是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>

您的意思是？看起来正确，但似乎与我的代码有完全相同的问题。另外，它甚至没有在我的浏览器中打开自动完成（？？），哪个问题？这把小提琴对我有用。如果单击图标并关闭“自动完成”，窗口将打开。如果窗口打开，你点击图标，什么也不会发生。是的，没错，但我真的想在点击图标时自动完成关闭。此时，只需单击一下即可关闭并重新打开。“这就是问题所在。”佩玛回答

<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>