Autocomplete insert the value into two different inputs?

Question

I have this code

        <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
        <script type='text/javascript' src="js/jquery.autocomplete.js"></script>
        <link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
        <script type="text/javascript">



            $().ready(function() {
               

                $("#course").autocomplete("autocomplete.php", {
                    width: 300,
                    matchContains: true,
                    mustMatch: true,
                    minChars: 0,
                    //multiple: true,
                    highlight: false,
                    //multipleSeparator: ",",
                    selectFirst: true
                });
            });



        </script>

<input type="text" name="course" id="course" size="100"/><br><br><br>
<input type="text" name="id" id="id" size="100">

That generates this result:

And I got two input text in it. It is possible to notice that when the user presses some key, the function calls the file autocomplete.php that returns a json result.

{"name": "Agostinho", "id": "1"}

What I need now:

I wanted to distribute the results: nome and id in different inputs. The name go to the field course and the id go to the field id

How could I proceed in this case?

Answer 1

Use the JSON.parse(json) to transform the result of autocomplite on object.

That way you can do it like this:

var pessoa = JSON.parse(json);
$('#input-nome').val(pessoa.nome);
$('#input-id').val(pessoa.id);