Outras formas de apresentar o recurso de auto completar, podem ser feitas através de um arquivo JSON ou XML.
Abaixo o Código pronto para uso:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="pt-br" lang="pt-br">
<head>
<title>JQuery UI - Autocomplete Webservice</title>
<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.
custom.css" />
<script type= "text/javascript" src= "/static/js/jquery.min.js"></script>
<script type= "text/javascript" src= "/static/js/jquery-ui.min.js"></script>
<script type= "text/javascript">
$(function(){
$("#city").autocomplete({
source: function(request, response){
$.ajax({
url:"htpp://ws.geonames.org/searchJSON",
dataType="jsonp",
data: {
featureClass:"P",
style:"full",
maxRows:12,
name_startsWith: request.term
},
success: function(data){
response($.map(data.geonames, function(item){
return{
label: item.name + (item.adminName1 ?","
+ item.adminName1 : "") + "," + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2
});
});
</script>
<style type="text/css">
.ui-autocomplete-loading{background:white url()'static/img/ajax.gif')
right center no-repeat;}
</style>
</head>
<body>
<h2>JQuery UI - Autocomplete Webservice</h2>
<div>
<label for="city">Cidade: </label>
<input type= "text" id="city" />
</div>
</body>
</html>