title: How to fill multiple input fields in a template using jquery autocomplete
body: <p>I have been trying to fill <em><strong>multiple input fields</strong></em> using jquery autocomplete in my Django app.</p>
  <p>As an example, my model is somewhat like this:</p>
  <pre><code>class Country(models.Model):
      country_code = models.CharField(max_length=2,  ...) # To store ISO codes
      name = models.CharField(max_length=60,...) # To store country name
  </code></pre>
  <p>Now using the following script to call ajax function on an <strong>html template</strong>:</p>
  <pre><code>$(function() {
      $( &quot;#id_country&quot; ).autocomplete({
          source: &quot;{% url ... %}&quot;,
          select: function(e, ui) {
              $(&quot;#id_country&quot;).val(ui.item.id);
          //  $(&quot;#id_country_code_txt&quot;).val(ui.item.label);   // I need to populate this input field
              $(&quot;#id_country_txt&quot;).val(ui.item.label);
              return false;
          },
          ...
          ...
      });
  });
  </code></pre>
  <p>and the following function in my <strong>views.py</strong>:</p>
  <pre><code>def CountrySearch(request):
      if request.is_ajax():
          q = request.GET.get('term','')
          names = Country.objects.filter(name__icontains=q).annotate(value=F('name'), label=F('name')).values('id', 'value', 'label')
          result = list(names)
          data = json.dumps(result)
      mimetype = 'application/json'
      return HttpResponse(data, mimetype)
  </code></pre>
  <p>I am able to fill (<em>autocomplete</em>) one of the input fields (refer the <em><strong>image</strong></em> with fields <code>id</code> and <code>country_name</code> populated). What I am aiming to do, however, is to fill the other dependent value of <code>id</code> (of the <code>Country</code> model) as well into input field  <code>id_country_code_txt</code> (the field marked with an <em><strong>arrow</strong></em>).</p>
  <p>In order to get the value of model field &quot;country_code&quot; (i.e the ISO Code), I added an additional query as below and modified the function to:</p>
  <pre><code>def CountrySearch(request):
      ...
          ...
          names = Country.objects.filter(name__icontains=q).annotate(value=F('name'), label=F('name')).values('id', 'value', 'label')
          country_codes = Country.objects.filter(country_code__icontains=q).annotate(value=F('country_code'), label=F('country_code')).values('id', 'value', 'label')
          result = list(names) + list(country_codes)
          print('HERE ARE THE results COLLECTED: ' + str(result)) # To see the values being picked up
          ...
          ...
  </code></pre>
  <p>In the terminal as I print out the values of the generated list (containing both the fields namely <code>country_code</code> and <code>country_name</code>), the resultant list is as follows:</p>
  <pre><code>[
  {'id': 2, 'value': 'United States of America', 'label': 'United States of America'}, 
  {'id': 2, 'value': 'US', 'label': 'US'}
  ]
  </code></pre>
  <p>What I am struggling to do is to pass the value <em><strong>US</strong></em> to the input field <code>id_country_code_txt</code> marked in the image with an <em><strong>arrow</strong></em>.</p>
  <p>Shall appreciate if someone can show me a way how to achive this.</p>
  <p><strong>Edit</strong>:
  An image of the fields in the question (part of the form) added. Please have a look.
  <a href="https://i.stack.imgur.com/teKmq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/teKmq.png" alt="enter image description here" /></a></p>