Originariamente inviata da
Luigi636
Salve..
Vorrei ottenere un campo Autocomplete dove poter cercare ad esempio un cliente sia tramite il nome sia tramite il suo codice, ma facendo visualizzare soltanto il nome..
Come potrei fare?
Un esempio potrebbe essere questo:
Codice PHP:
<select name="linguaggio" id="combobox">
<option value="1234">PHP</option>
<option value="4321">Python</option>
<option value="3241">Ruby</option>
<option value="4312">Scala</option>
<option value="2341">Scheme</option>
</select>
Ciao,
non so se esiste un modo più rapido, magari manipolando qualche libreria tipo autocomplete jquery si riesce con poco, ma non avendolo mai fatto non so dirti di più, ma in ogni caso puoi sempre farti il tuo autocomplete in questo modo:
codice:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/plugins/jquery-1.6.4.min.js"></script>
<script>
$.fn.autoCompletamento = function (opzioni) {
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
}
var self = this[0];
var input = self.getElementsByTagName("input")[0];
var ul = self.getElementsByTagName('ul')[0];
var img = self.getElementsByTagName('img')[0];
var span = self.getElementsByTagName('span')[0];
var ultimoDGT = 0;
var vettore = [];
$(input).keypress(function () {
setTimeout(function () {
var queryValue = $(input).val();
if (ultimoDGT == queryValue.length)
return;
ultimoDGT = queryValue.length;
opzioni.testo = queryValue;
impostaOpzioni();
if (vettore.length > 0) {
input.focus();
input.value = vettore[0].isID ? vettore[0].value.toString() : vettore[0].text;
input.setSelectionRange(ultimoDGT, input.value.length);
span.innerText = vettore[0].text;
}
else
span.innerText = queryValue;
}, 30);
});
input.addEventListener("focus", function (value) { ul.style.visibility = "visible"; span.style.visibility = "hidden"; input.select(); });
input.addEventListener("blur", function () {
setTimeout(function () {
ul.style.visibility = "hidden";
span.style.visibility = "visible";
span.focus();
}, 150);
});
input.addEventListener("keyup", function (event) {
ul.style.visibility = "visible";
if (event.keyCode == 46 || event.keyCode == 8)
$(input).keypress();
});
img.addEventListener("click", function (item) {
var invisible = ul.style.visibility == "hidden";
ul.style.visibility = invisible ? "visible" : "hidden";
if (invisible)
input.value = "";
$(input).keypress();
});
span.addEventListener("click", function (item) {
setTimeout(function () {
span.style.visibility = "hidden";
input.focus();
}, 30);
});
impostaOpzioni();
function impostaOpzioni() {
ul.innerHTML="";
vettore = cerca(opzioni.source, opzioni.testo);
for (var i = 0; i < vettore.length; i += 1) {
var opt = document.createElement('li');
opt.innerHTML = vettore[i].text;
opt.addEventListener("click", function (item,a) {
input.value = item.target.innerText;
setTimeout(function () {
$(input).keypress();
setTimeout(function () { ul.style.visibility = "hidden"; span.style.visibility = "visible"; span.focus(); }, 30);
}, 10);
});
ul.appendChild(opt);
}
}
function cerca(vettore, valore) {
var risultato = [];
if (!valore || valore == "")
return vettore;
for (var i = 0; i < vettore.length; i += 1) {
if (vettore[i].text.toUpperCase().startsWith(valore.toUpperCase()) ||
vettore[i].value.toString().toUpperCase().startsWith(valore.toUpperCase())) {
vettore[i].isID = vettore[i].value.toString().startsWith(valore);
risultato.push(vettore[i]);
}
}
return risultato;
}
return self;
}
</script>
<style>
.autoCompletamento {
position: relative;
width:100px;
}
.autoCompletamento span{
position: absolute;
top: 0;
left: 0;
right:0;
height:18px;
width:100px;
border-style: groove;
border-width: 1px;
background-color:whitesmoke;
z-index: 11;
}
.autoCompletamento ul {
position: absolute;
border-width:inherit;
top: 3px;
left: 0;
z-index: 12;
width:100px;
border-style: groove;
border-width: 1px;
visibility:hidden;
background-color:whitesmoke;
list-style-type: none;
padding: 0;
}
.autoCompletamento li
{
position: relative;
margin-left:0px;
padding-left:0px;
cursor:pointer;
}
.autoCompletamento li:hover
{
background-color:#a8a8a8;
}
.autoCompletamento input {
position: absolute;
top: 0px;
left: 0;
right:0;
padding-right:30px;
width:68px;
border-style: groove;
z-index: 10;
}
.autoCompletamento img {
position: absolute;
top:0px;
right:0px;
margin-right:-3px;
display:inline-block;
width:20px;
height:18px;
border-style: groove;
border-width: 1px;
background-color:whitesmoke;
z-index: 11;
}
</style>
</head>
<body>
<div class="autoCompletamento" id="auto1">
<span></span>
<input type="text"/>
<img src="images/Drop_Down.png" />
<ul/>
</div>
<script>
$("#auto1").autoCompletamento({
source: [
{ value: 1234, text: 'PHP' },
{ value: 4321, text: 'Python' },
{ value: 3241, text: 'Ruby' },
{ value: 4312, text: 'Scala' },
{ value: 2341, text: 'Scheme' }
]
});
</script>
</body>
</html>
In pratica copro la textbox (dove puoi scrivere il sia il testo che il valore) con uno span che conterra il testo (e mai l'id), quest'ultimo quando cliccato viene nascosto per mostrare la textbox sottostante e restituirli il focus. A questo punto sia quando il textbox ottiene il focus, sia quando premi un tasto, il sistema controlla le eventuali corrispondenze del testo della textbox, sia nel valore e sia nel testo dell'elemento (es: value:1234, text:'PHP' può essere chiamato con 1... oppure con p..., è indifferente), una volta filtrate tutte le entità che iniziano con il testo o id selezionato, vengono mostrati gli elementi corrispondenti nella tendina, inoltre il testo viene completato e viene selezionata la parte completata (es: scrivo 1 e seleziona il testo da 234, in modo che posso continuare a scrivere senza cancellare) automaticamente tramite il primo elemento corrispondente, in questo modo basta che la casella perda il focus per far comparire di nuovo lo span con il nome (mostra a video sempre e solo il nome dell'elemento selezionato una volta usciti dal focus) dell'elemento selezionato.
trovi un esempio funzionante qui
Ovviamente vuole essere solo uno spunto, e i css non sono affatto precisi, ma non dovrebbe essere difficile sistemarli. la parte js dovrebbe sunzionare, ma va migliorata e testata.
Permessi di invio
Rispondi quotando