Originariamente inviata da
Vincent.Zeno
dipende da cosa intendi.
se da un punto di vista prettamente tecnico puoi cominciare la discussione nel forum HTML, poi si vede
Volevo chiedere se a vostro parere, "fondendo" un'"input select" con un'input text creo problemi di comprensione agli utenti medi..
Il codice è scritto a capocchia, volevo soltanto rendere l'idea
codice:
<?php
function selectOption($cosa, $larray){
?>
<div id="inputSelect">
<input type="text" id="inputVero<?php echo $cosa; ?>" onkeyup="filtra(this.value, '<?php echo $cosa; ?>')" onfocus="document.getElementById('k<?php echo $cosa; ?>').style.display='block';" onblur="filtras('<?php echo $cosa; ?>');" />
<br />
<div class="selectFinta" id="k<?php echo $cosa; ?>">
<?php
for($i=0; $i<count($larray); $i++){
?>
<div class="ansia" onmouseover="document.getElementById('inputVero<?php echo $cosa; ?>').value=this.innerHTML;"><?php echo $larray[$i]; ?></div>
<hr class="ansia2" />
<?php
}
?>
</div>
</div>
<?php
}
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function filtra(stringa, cosa){
for(i=0; i<document.getElementById('k'+cosa).getElementsByClassName('ansia').length; i++){
if(document.getElementById('k'+cosa).getElementsByClassName('ansia')[i].innerHTML.substring(0, stringa.length).toLowerCase() != stringa.toLowerCase()){
document.getElementById('k'+cosa).getElementsByClassName('ansia')[i].style.display='none';
document.getElementById('k'+cosa).getElementsByClassName('ansia2')[i].style.display='none';
}
else{
document.getElementById('k'+cosa).getElementsByClassName('ansia')[i].style.display='block';
document.getElementById('k'+cosa).getElementsByClassName('ansia2')[i].style.display='block';
}
}
}
function filtras(cosa){
for(i=0; i<document.getElementById('k'+cosa).getElementsByClassName('ansia').length; i++){
document.getElementById('k'+cosa).getElementsByClassName('ansia')[i].style.display='block';
document.getElementById('k'+cosa).getElementsByClassName('ansia2')[i].style.display='block';
}
document.getElementById('k'+cosa).style.display='none';
}
</script>
<style>
#inputSelect{
position:relative;
}
#inputVero{
width:150px;
}
.selectFinta{
position:absolute;
top:27px;
background-color:white;
left:0;
display:none;
z-index:1;
width:152px;
border:solid 1px blue;
height:94px;
overflow:scroll;
overflow-x:hidden;
}
.ansia{
height:22px;
}
.ansia:hover{
background-color:blue;
}
.ansia2{
margin:0;
width:133px;
}
</style>
</head>
<body>
Città:
<?php
selectOption('citta', array('Torino', 'Milano', 'Roma', 'Treviso', 'Trento'));
?>
Capelli:
<?php
selectOption('capelli', array('Biondi', 'Rossi', 'Bruni', 'Neri'));
?>
</body>
</html>