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)    收藏  举报