Question

我有一个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。

Answer 1

我已经更新了你的小提琴。你可以在这里看看。它现在正在工作。只是用了一些小技巧。 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>

jQuery：自动填充，不要点按按钮

1 个答案: