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：オートコンプリート、ボタンをクリックして閉じないでください

答えて

関連する問題