jQuery search JSON and populate form fields

Question

I've trawled Stackoverflow and the web in general looking for an answer to this. I've found some good suggestions (eg http://af-design.com/blog/2010/05/12/using-jquery-uis-autocomplete-to-populate-a-form/ ) but can't get any to work ... completely due to my ignorance!

I have a JSON file containing a Locality, State and Postcode data (shortened version):

[
    {
      "PCODE":7255,
      "LOCALITY":"LOCCOTA",
      "STATE":"TAS"
    },
    {
       "PCODE":7255,
       "LOCALITY":"LUGHRATA",
       "STATE":"TAS"
    },
    {
       "PCODE":7255,
       "LOCALITY":"MEMANA",
       "STATE":"TAS"
    }
]

Basically I want to allow a user to enter a Locality into a form field and then have jQuery search the JSON file, find a match for Postcode and State and use those matching values to populate Postcode and State form text fields

Here's the form I'm using plus some test jQuery pulled from http://af-design.com/ (which I can't get to work - my fault, not source script):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<style>
    label{
   float:left;
   width:80px;
}

</style>

<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css"     media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"   type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){
var ac_config = {
    source: "p-codes.json",
    select: function(event, ui){
        $("#city").val(ui.item.LOCALITY);
        $("#state").val(ui.item.STATE);
        $("#zip").val(ui.item.PCODE);
    },
    minLength:1
};
$("#city").autocomplete(ac_config);
});
</script>

</head>
<body>

<form action="#" method="post">
 <p><label for="city">City</label><br />
     <input type="text" name="city" id="city" value="" /></p>
 <p><label for="state">State</label><br />
     <input type="text" name="state" id="state" value="" /></p>
 <p><label for="zip">Zip</label><br />
     <input type="text" name="zip" id="zip" value="" /></p>
</form>

</body>
</html>

Any help or suggestions would be much appreciated!

Regards,

Mekong

Answer 1

Should'nt it be like this ?

.autocomplete({
        source: function( request, response ) {
          $.getJSON( "p-codes.json", {
            term: extractLast( request.term )
          }, response );
        }
      });

http://jqueryui.com/autocomplete/#remote

Answer 2

OK ... a bit more trawling around the web and I was able to sort this one out, thanks to http://www.jensbits.com/ All working now.

$("#state").autocomplete({
            source: function( request, response ) {
            $.ajax({
                url: "location.json",
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                            response($.map(data, function(item) {
                            return {
                                label: item.state,
                                id: item.id,
                                abbrev: item.abbrev
                                };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                $('#state_id').val(ui.item.id);
                $('#abbrev').val(ui.item.abbrev);
            }
        });

jQuery search JSON and populate form fields

Question

2 answers

solution1
0 2014-05-23 11:42:39

solution2
0 2014-05-23 13:57:13

jQuery search JSON and populate form fields

Question

2 answers

solution1 0 2014-05-23 11:42:39

solution2 0 2014-05-23 13:57:13

solution1
0 2014-05-23 11:42:39

solution2
0 2014-05-23 13:57:13