Newsgroup: it.comp.lang.javascript
Titolo: Campo di input con dropdown list

Avrei bisogno di creare un controllo all'interno di un form html uguale
alla barra di inserimento dell'url di un qualsiasi browser, che
praticamente ti lascia inserire del testo e in piu' ti consente di
aprire una drop down list e scegliere uno degli elementi dalla lista,
che una volta scelto diventa nuovmente editabile.
Inizialmente avevo provato con un campo select, ma pare che non ci sia
la possibilita' per un utente di immettervi del testo, ma solo di
scegliere tra le options prefissate.
Stavo pensando allora ad una specie di sovrapposizione tra un campo
testo (in primo piano)e un campo select di cui sia visibile solo il
pulsantino che fa scendere giu' la lista, e sull'evento onchange andare
ad imporre il valore del campo di testo, ma non saprei come fare la
sovrapposizione dei due campi.
Qualcuno ha qualche suggerimento?
Grazie in anticipo
Pizza67

 che una volta scelto diventa nuovmente editabile.
[CUT]
non è così semplice.
dici tipo questo:
 
http://www.google.com/webhp?complete=1&hl=en
?
-- 
"Ho smesso di fumare.
 Vivrò una settimana di più.
 E in quella settimana pioverà a dirotto"
									    W.A.

 Qualcuno ha qualche suggerimento?
Il link di cui prima, si chiama proprio "google suggest" ;) e cercando con
esso "javascript autocomplete" ottieni 42.000 risultati, alcuni dei quali
credo che facciano sicuramente al caso tuo.
-- 
Chuck Norris annega i pesci.

 alcuni dei quali credo che facciano sicuramente al caso tuo.
:)
Grazie
Pizza67

> 
http://www.google.com/webhp?complete=1&hl=en
Se Zer0 ti consiglia cosi' probabilmente dovresti seguirlo, tuttavia se
vuoi continuare per la tua strada puoi farlo benissimo, basta non
sovrapporle (forse e' piu' semplice):
di seguito di posto 2 righe di codice al volo che sono tra l'altro
cross-browser
[code]
<form action=""> 
  <input name="testo" type="text" style="width: 120px;"
onfocus="this.form.suggerimenti.style.display='block'"
onblur="setTimeout('document.forms[0].suggerimenti.style.display=\'none\'',200)"
/> 
  <br />
  <select name="suggerimenti" size="5"
onchange="this.form.testo.value=this.options[this.selectedIndex].text"
style="display:none;overflow:scroll;width: 125px">
    <option>a</option> 
    <option>b</option> 
    <option>c</option> 
    <option>d</option> 
    <option>e</option> 
  </select> 
</form> 
[/code]
A te resta da fare la funzione che popola la select o che gli assegna il
selectedIndex all'elemento giusto... 

 1 )!
Vedi: 
e99xvp2tpjco.g...@40tude.net
Cmq la cosa mi ha stuzziacato e l'ho fatto come esercizio;
in meno di 2kb ho gia' ottenuto una cosa gradevole
(lo aggingero' ai miei scriptini che poi vanno puntualmente
nel dimenticatoio...)
Se hai dei problemi e se ti interessa ancora posso aiutarti e dirti come ho
fatto...
P.S. x i posteri
devo fare ancora qualche miglioria...

 come ho fatto...
Ti ringrazio mi aiuterebbe molto. Per completezza devo dire che con la 
sovrapposizione l'effetto è esattamente quello che volevo sia su Opera che 
su Firefox (entrambi per x86), purtroppo però su Opera embedded avviene uno 
strano fenomeno di flickering per cui ogni tanto per una frazione di secondo 
si vede il campo sottostante, e questo non va bene.
Il codice che hai scritto nel precedente post va benissimo, solo che dovrei 
integrarlo con un pulsantino che sulla premuta mi fa comparire la select e 
che sulla selezione di un valore dalla select quest'ultima sparisse e 
restasse di nuovo solo il campo di input con il valore aggiornato 
(esattamente come funziona il campo di immissione dell'url del browser) .
Tu a che punto sei arrivato con il tuo "esercizio"? :)
Pizza67 

> Tu a che punto sei arrivato con il tuo "esercizio"? :)
Mah, buono, pero' devo dire che quello che ho fatto io e' forse un po' un
altra cosa, sono stato un po' tratto in inganno dal link
http://www.google.com/webhp?complete=1&hl=en
 e io l'ho rifatto
probabilmente semplificato o piu' cross-browser e utilizzando la select...
ma di fatto e' la stessa cosa
tu in realta' vuoi fare una cosa un po' diversa, rileggendo il tuo post
originale,
quindi non saprei...
posso dirti i 2 modi che mi vengono in mente per sfruttare il lavoro che
hai fatto fin ora... visto che c'e' questo problema del flickering,
sfruttare completamente il tuo lavoro, pero'
(1)
  .rendere opaco allo 0% la select
  .mettergli sotto l'immagine del tastino della tendina
  .all'evento onclick sulla select settargli l'opacita' al 100%
  .e all'evento onchange (come gia' stai facendo) settare
     il valore del campo input
  .all'evento onblur e onchange ridargli l'opacita' allo 0%
[forse ci potrebbero essere un po' di problemi...]
(2)
  .imporre una size ad es. di 5 alla select
  .metterla sotto al campo input
  .renderla invisibile
  .mettere l'immagine del tastino della tendina affianco al input
     al cui onclick fa visualizzare la select
  .e all'evento onchange (come gia' stai facendo) settare
     il valore del campo input
  .all'evento onblur e onchange rirenderlo invisibile
[c'e' lo scroll della finta tendina...]
Altro non mi viene in mente,
se non dovessero andarti bene queste soluzioni, allora bisogna passare ai
livelli...
Ciao