jQuery: Autocomplete, nicht auf Knopfdruck klicken

Ich habe eine jQuery UI Autocomplete-Liste und möchte es öffnen und schließen bei Klick in das Eingabefeld oder auf ein Symbol. Die automatische Vervollständigung wird automatisch geschlossen, wenn ich irgendwo anders auf die Seite klicke. Was gut ist. Aber: Ich möchte nicht, dass dieser schließende Automatismus ausgelöst wird, wenn ich auf mein Symbol klicke. Im Moment, wenn die Liste geöffnet ist und ich auf das Symbol klicke, wird die Liste zuerst geschlossen (aufgrund des Automatismus) und dann sofort wieder geöffnet.jQuery: Autocomplete, nicht auf Knopfdruck klicken

Kann ich irgendwie das automatische Schließen nur für Klicks auf das Symbol verhindern?

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

Hier ist ein jsfiddle.

Quelle

2017-03-01 PeMa

Sie meinen so etwas wie [das] (https://jsfiddle.net/6e2mtr69/2/)? – Huelfe

Sieht korrekt aus, scheint aber genau das gleiche Problem wie mein Code zu haben. Plus, es öffnet nicht die automatische Vervollständigung in meinem Browser (????). – PeMa

Welches Problem? Diese Geige funktioniert für mich. Wenn Sie auf das Symbol klicken und die automatische Vervollständigung geschlossen wird, öffnet sich das Fenster. Wenn das Fenster geöffnet ist und Sie auf das Symbol klicken, passiert nichts. – Huelfe

Ich habe deine Geige aktualisiert. Sie können hier auschecken. es funktioniert jetzt. habe nur ein paar kleine Tricks benutzt. 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'); 
    }); 
});

hier ist die html nur wenig Änderungen

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

Quelle

2017-03-02 10:17:41 prabhjot

jQuery: Autocomplete, nicht auf Knopfdruck klicken

Antwort

Verwandte Themen