jquery - Autocompletion keeps history on the inputfield and sends multiple requests -

i have following code:

     $("#city").on('change', function() {          $("#keyword").autocomplete('<?php echo base_url();?>index.php/formhandler/autocomplete', {              width: 300,              matchcontains: true,              extraparams: {                  data: $("#city").val()              }           });      }); 

here html:

<select id="city" name=""> <option selected value="">--select city--</option> <option value="1">city1</option> <option value="2">city2</option>                             </select> <input id="keyword" name="" type="text" placeholder="search" style="width:300px;"/> 

i want autocomplete keywords field according city selected, problem autocompletion sends multiple requests (it sends latest city id along previous data selected). when looked in firebug, keyword field keeps previuos history. how can resolve this?

one issue parentheses , braces in javascript don't match. how should be, notice last 2 lines in particular:

$("#city").on('change', function() {     $("#keyword").autocomplete('<?php echo base_url();?>index.php/formhandler/autocomplete', {         width: 300,         matchcontains: true,         extraparams: {             data: $("#city").val()         }     }); }); 

you have misspelt selected in first option tag: selcted should selected