jQuery Autocomplete

$(function(){

$("input[name='miasto1']").autocomplete('dane.php',{
width:300,
formatItem: function(row, i, max) {
return row[1] + " (ID: " + row[0] + ")";
},
formatMatch: function(row, i, max) {
return row[1];
},
formatResult: function(row) {
return row[1];
}

});
});

/*demo page css*/
body { font: 62.5% "Tahoma", sans-serif; margin: 10px 0px; color:#111111; }
h1,h2,h3,h4,h5 { color: #555555; }
h1 { font-size: 17px; font-weight: bold; }
h2 { font-size: 13px; font-weight: bold; }
h3 { font-size: 11px; font-weight: bold; }
img { vertical-align: middle; }
pre { font-size: 11px; margin: 10px 0px; }
div.c { margin: 10px 0px; font-size: 11px; }

.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999;
}

.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}

.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
/*
if width will be 100% horizontal scrollbar will apear
when scroll mode will be used
*/
/*width: 100%;*/
font: menu;
font-size: 12px;
/*
it is very important, if line-height not setted or setted
in relative units scroll will be broken in firefox
*/
line-height: 16px;
overflow: hidden;
}

.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}

.ac_odd {
background-color: #eee;
}

.ac_over {
background-color: #0A246A;
color: white;
}

Przykład 4. Użycie opcji formatItem, formatMatch, formatResult.

4.1 formatujemy sposób prezentacji listy, do naszego inputa przesyłamy nazwę miasta

Miejscowość: ( Naciśnij "W", aby wywołać podpowiedzi. )