5

Esiste un modo per visualizzare il risultato del completamento automatico impostato sopra l'immissione del testo?Come posizionare il menu di completamento automatico sopra l'input di testo?

Il problema è che lo sto utilizzando in un'applicazione Lighbox. L'elemento di sfondo impostato al 100% dell'altezza e della larghezza delle pagine, non si espanderà naturalmente con il suo contenuto. Quindi se il contenuto sopra la casella di testo aumenta così tanto che l'input è forzato verso la parte inferiore della pagina, e quindi l'utente digita qualcosa al suo interno, viene visualizzato il menu di completamento automatico e l'input è verso la fine della pagina, il menu viene visualizzata la barra di scorrimento

Poiché l'elemento di sfondo (di colore scuro) non si espande per adattarlo, poiché il menu è posizionato in modo assoluto, sembra visivamente brutto che la parte inferiore della pagina appaia bianca (coerente con il colore della pagina effettiva) mentre la parte superiore della pagina è scura.

Quindi è comunque necessario eseguire questa operazione, prima che venga visualizzato il menu di completamento automatico, è necessario verificare la posizione dell'ingresso. Se è, per esempio, a più di 300 px dall'alto, il menu dovrebbe apparire sopra l'input? Questo è il codice:

<!DOCTYPE html> 
<html> 
<head> 
<title>Filter</title> 
<link type="text/css" href="ui/ui.css" rel="stylesheet" /> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="ui.js"></script> 
<style> 
div.filtertab { display: inline-block; height: 30px; background:url(filter.png); border-radius: 5px; position: relative; margin: 10px 45px 10px 8px; cursor: pointer; -moz-user-select: none; box-shadow: 4px 2px 2px #aaaaaa; } 

div.filtertab span.filtertext { position: relative; margin-top: 4px; margin-left: 11px; margin-right: 1px;font-family:cursive,"Comic Sans"; font-size: 0.9em; float: left; display: inline-block; } 

span.arrow { display: inline-block; border-top: 5px solid transparent; width: 0px; height: 0px; border-bottom: 5px solid transparent; border-right: 8.66px solid transparent; border-left: 8.66px solid #333333; margin-left: 7px; margin-top: 10.5px; } 

.dateheaders { background: url(select.png); width: 120px; height: 28px; position: absolute; top: 0px; left: 0px; border-radius: 5px; cursor: pointer; display: inline-block; z-index: 55; } 

.toheader { left: 183px } 

.spandatew { font-weight: bold; position: relative; top: 2px; left: 6px; color: white; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-weight: bold; color: white; font-size: 0.8em; } 

div.arrow { height: 0px; width: 0px; position: absolute; display: inline-block; border-bottom: 5px solid transparent; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid white; right: 8px; top: 12px; } 

input#from,input#to {width:107px;height:20px; position: relative; top: -30px; opacity: 0.01; cursor: pointer; } 

input#from { left: 22px; } 

input#to { left: 79px; } 

div#ui-datepicker-div { left: -10px; } 

div#diva1 { width: 190px; position: absolute; display: none; z-index: 10; outline: none;} 

div#diva2 { width: 190px; position: absolute; display: none; z-index: 10; outline: none;} 

#datecontainer { position: relative; width: 400px; height: 30px; background: red; left: 10px; } 

.inpdiv { position: relative; margin-top: 6px; margin-left: 7px; background: #E2E6FF; border-radius: 3px; margin-bottom: 5px; display inline-block; float: left; margin-right: 3px; } 

.inpdiv span.content { position: relative; top: 1px; left: 2px; padding: 2px 5px 6px 2px; font-size: 0.9em; display: inline-block; font-family: cursive,"Comic Sans";} 

.inpdiv span.cancel { display: inline-block; border-radius: 3px; position: relative; top: 5px; margin: 3px 3px 3px 4px; height: 12px; width:12px; background: #bdbbae; cursor: pointer; } 

.letter { position: absolute; display: inline-block; right: 4.4px; top: 4.7px; cursor: pointer; FONT-FAMILY: SANS-SERIF; FONT-SIZE: 0.9EM; } 

div.friends { width: 400px; position: relative; overflow: hidden; border: 1px solid #4496e7; border-radius: 5px; cursor: text; height: 35px; height: auto !important; min-height: 35px; left: 5px; } 
div.friends2 { margin-top: 10px; } 

div.friendsc { position: relative; top: 100px; left: 350px; width: 410px; padding: 10px 0px; height: auto !important; height: 80px; min-height: 80px; background: green;} 

div.clear { clear: both; width: 100%; height: 10px; } 

button { position: absolute; top: 300px; left: 450px; } 

input { position: relative; margin: 9px 0px 10px 10px; border: 0px solid white; float: left; max-width: 382px; } 

div#outerfilter { width: 900px; background: grey; position: relative; min-height: 400px; max-height: 500px; margin:auto; top: 10px; overflow: auto; padding-bottom: 20px; } 
div#innerfilter { position: relative; top: 0px; left: 0px; width: 880px; min-height: 400px;background: #eaeaea; } 
.filtersection { position: relative; float: left; width: 440px; min-height: 400px; height: auto !important; } 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
(function($){ 

$.fn.autoGrowInput = function(o) { 

      o = $.extend({ 
       maxWidth: 1000, 
       minWidth: 0, 
       comfortZone: 70 
      }, o); 

      this.filter('input:text').each(function(){ 

       var minWidth = o.minWidth || $(this).width(), 
        val = '', 
        input = $(this), 
        testSubject = $('<tester/>').css({ 
         position: 'absolute', 
         top: -9999, 
         left: -9999, 
         width: 'auto', 
         fontSize: input.css('fontSize'), 
         fontFamily: input.css('fontFamily'), 
         fontWeight: input.css('fontWeight'), 
         letterSpacing: input.css('letterSpacing'), 
         whiteSpace: 'nowrap' 
        }), 
        check = function() { 

         if (val === (val = input.val())) {return;} 

         // Enter new content into testSubject 
         var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); 
         testSubject.html(escaped); 

         // Calculate new width + whether to change 
         var testerWidth = testSubject.width(), 
          newWidth = Math.min((testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, o.maxWidth - 1), 
          currentWidth = input.width(), 
          isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) 
               || (newWidth > minWidth && newWidth < o.maxWidth); 

         // Animate width 
         if (isValidWidthChange) { 
          input.width(newWidth); 
         } 

        }; 

       testSubject.insertAfter(input); 

       $(this).bind('keyup keydown blur update', check); 

      }); 

      return this; 

     }; 

    })(jQuery); 

arr = ["Soumyashree Chakraborty", "Payel","Jinia","Soujinia","Apoorva","Mona","Shamarpita","Pratik","Pranendra","Bhushan","Bijesh","Salma","Swift","Anushka","Radhe","Amol","Bardha","Sujata","Rohit","Amit","Anuradha","Amrita","Ajay","Sumil","Sachin","Sourav","Anmol","Britannia","Anamika","Priyanka"]; 
$("span.letter").live('click',function() { 
$(this).parent().parent().find("input").focus(); 
$(this).parent().remove(); 
    }); 

options = { 
      source: arr.slice(0,5), 
      minLength: 1, 
      select: function(event,ui) { 
      $('<span class = "inpdiv"><span class = "content">'+ui.item.value+'</span><span class = "cancel"></span><span class="letter">X</span></span>').replaceAll(this); 
      $("<input type='text' size='3' />").appendTo(curautocomp).focus(); 
      event.preventDefault(); 
      }, 
      focus: function(e,ui) { 
      e.preventDefault(); 
      }, 
      autoFocus: true, 
      delay: 0 
      }; 
$("input").live("focus", function (event) { 
curautocomp = $(this).parent(); 
$(this).autocomplete(options); 
$(this).autoGrowInput({ 
    comfortZone: 5, 
    minWidth: 15, 
    maxWidth: 382 
}); 
}); 
















}); 
</script> 
</head> 
<body> 
<div id = 'outerfilter'> 
<div id = 'innerfilter'> 
<div class = 'filtersection'> 
<div class="filtertab"><span class="filtertext">Filter by Forum</span><span class='arrow'></span></div> 
<br /> 
<div class = "friends"> 
<input type = "text" size = "2" value = "" /> 
</div> 
<div class="filtertab"><span class="filtertext">Not Asked by</span><span class='arrow'></span></div> 
<br /> 
<div class = "friends"> 
<input type = "text" size = "2" value = "" /> 
</div> 
<div class="filtertab"><span class="filtertext">Has No Answer by</span><span class='arrow'></span></div> 
<br /> 
<div class = "friends"> 
<input type = "text" size = "2" value = "" /> 
</div> 
<div class="filtertab"><span class="filtertext">No of Answers</span><span class='arrow'></span></div> 
<br /> 
<div class = "friends"> 
<input type = "text" size = "2" value = "" /> 
</div> 
</div> 
<div class = 'filtersection'> 
<div class="filtertab"><span class="filtertext">Asked by</span><span class='arrow'></span></div> 
<br /> 
<div class = "friends"> 
<input type = "text" size = "2" value = "" /> 
</div> 
<div class="filtertab"><span class="filtertext">Has Answer by</span><span class='arrow'></span></div> 
<br /> 
<div class = "friends"> 
<input type = "text" size = "2" value = "" /> 
</div> 
<div class="filtertab"><span class="filtertext">Filter by Date</span><span class='arrow'></span></div> 
<br /> 
<div id = 'datecontainer'> 
<div class = 'dateheaders fromheader'> 
<span class = 'spandatew'>Select a date</span> 
<div class = 'arrow'></div> 
</div> 
<div class = 'dateheaders toheader'> 
<span class = 'spandatew'>Select a date</span> 
<div class = 'arrow'></div> 
</div> 
<div id = 'diva1'></div> 
<div id = 'diva2'></div> 
</div> 
</div> 
<div class = 'clear'></div> 
</div> 
</div> 
</body> 
</html> 
+0

Dovresti includere qualche demo o fonte che possiamo guardare :) – OptimusCrime

+0

Il codice sorgente è enorme, ci sono molti file CSS da cui sono stati raccolti diversi stili, è molto difficile includerlo! – SexyBeast

+0

Il sito è disponibile online? Capisco cosa stai cercando di fare, ma è difficile trovare una soluzione senza vedere come tutto è messo insieme. È come cercare di camminare senza gambe nell'oscurità. – OptimusCrime

risposta

6

Ti consigliamo di aggiungere una funzione open alle opzioni di completamento automatico. Da lì, puoi regolare i risultati in base alla posizione e all'altezza attuali. Questo dovrebbe ottenere si chiude:

open: function(event, ui){ 
    var $input = $(event.target), 
     $results = $input.autocomplete("widget"), 
     top = $results.position().top, 
     height = $results.height(), 
     inputHeight = $input.height(), 
     newTop = top - height - inputHeight; 

    $results.css("top", newTop + "px"); 
} 
+1

Grazie! Era esattamente quello che stavo cercando! Ovviamente non voglio che il menu mostri sempre sopra, quindi ho aggiunto un controllo che se l'offset(). Top + height() 'di' $ results' supera l'altezza del documento, solo allora dovrebbe inserire l'ultimo linea del tuo codice, altrimenti visualizza il menu come fa naturalmente sotto. Grazie ancora! – SexyBeast

+0

@Cupidvogel Sono contento che abbia funzionato per te! Ho dovuto fare qualcosa di molto simile a questo qualche settimana fa, quindi era ancora fresco nella mia mente – lbstr

4

Questo mette insieme la soluzione di Ibstr e commentare di Cupidvogel mentre l'aggiunta di rilevamento della posizione di scorrimento della finestra:

open: function (event, ui) { 
    var $input = $(event.target); 
    var $results = $input.autocomplete("widget"); 
    var scrollTop = $(window).scrollTop(); 
    var top = $results.position().top; 
    var height = $results.outerHeight(); 
    if (top + height > $(window).innerHeight() + scrollTop) { 
     newTop = top - height - $input.outerHeight(); 
     if (newTop > scrollTop) 
      $results.css("top", newTop + "px"); 
    } 
} 

Si noti che sto usando outerHeight invece di altezza perché voglio prendere in considerazione anche lo spessore del bordo.

Il completamento automatico si orienterà verso l'alto solo se vi è spazio sufficiente affinché si adatti completamente al di sopra della casella di immissione.