jQuery：自動完成，不要關閉按鈕點擊

我有一個jQuery UI自動完成列表，並希望它打開和關閉在點擊輸入字段或圖標。當我點擊頁面上的其他任何地方時，自動完成功能會自動關閉。這很好。但是：當我點擊我的圖標時，我不想讓這種閉合自動操作觸發。目前，當列表打開並點擊圖標時，列表首先關閉（由於自動化），然後立即重新打開。jQuery：自動完成，不要關閉按鈕點擊

我可以以某種方式防止僅在點擊圖標時自動關閉嗎？

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

來源

2017-03-01 PeMa

你的意思是這樣[這]（https://jsfiddle.net/6e2mtr69/2/）？ – Huelfe

看起來正確，但似乎與我的代碼具有完全相同的問題。另外，它甚至沒有在我的瀏覽器中打開自動完成功能（????）。 – PeMa

哪個問題？這把小提琴適合我。如果您點擊圖標並關閉自動完成，則會打開窗口。如果窗口打開，並且您單擊該圖標，則不會發生任何事情。 – Huelfe

我已經更新了你的小提琴。你可以在這裏看看。它的工作現在。只是使用了一些小技巧。 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>

來源

2017-03-02 10:17:41 prabhjot

jQuery：自動完成，不要關閉按鈕點擊

回答

相關問題