JQuery autocomplete source functions request and response, select function
As explained in previous paper, I created a geo location look up web app, which can respond with Json results.
Now I need to call this web service using jquery Ajax and parse the response. then fill other fields as required.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
var address = $("#tags");
var fullAddresses = new Array();
var cities = new Array();
var countries = new Array();
var postal_codes = new Array();
var url = "http://localhost:8080/rda_geolocation_webapp/";
var autocomp_opt={
source :function(request, response, url){
var searchParam = request.term;
$.ajax({
url: "http://localhost:8080/rda_geolocation_webapp/get-address/"+searchParam,
dataType: "json",
type: "GET",
success: function (data) {
var responseStatus = data.status;
console.log("status"+" : " + responseStatus)
if(responseStatus == "OK"){
var results = data.responses;
for(var i = 0 ; i< results.length; i++){
fullAddresses[i] = results[i].full_address;
cities[i] = results[i].city;
countries[i] = results[i].country;
postal_codes[i] = results[i].postal_code;
//console.log("fullAddress " +" : "+ fullAddresses[i]);
}
};
response($.map(fullAddresses, function(item) {
return {
lable : item,
value: item,
id: item.id
};
}));
},
error:function (xhr, ajaxOptions, thrownError){
console.log("Errors on server side "+xhr.status + " " +thrownError );
}
})
},
select : function (event, ui) {
alert(this.id);
for(var j = 0 ; j< fullAddresses.length; j++){
if(fullAddresses[j] == ui.item.value){
$("#showdata").html(j+" "+ cities[j] +" "+countries[j] + " " + postal_codes[j] );
}
}
return true;
}
};
$(function() {
$('#tags').autocomplete(autocomp_opt);
});
</script>
autocomp_opt defines sources and select functions.
in Sources function, request.term is the value that user inputs. in response, there is a fixed pattern predefined by JQuery for user to define responses.
in select function, we can use id to distincquish which textfield users are currently using. And fill fileds respectively.
<div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags" /> </div>

posted on 2013-09-02 10:44 BlueWhale in ocean 阅读(405) 评论(0) 收藏 举报
浙公网安备 33010602011771号