I have two inputs using autocomplete. The second passes an extra parameter based on the value of first. However, the second input box will not be update it's local results when value of the first input box changes. I've tried clearing the cache and that doesn't seem to work. The best I can do is in the .result() function of the first box, I call .unautocomplete() on the second input and then immediately re- call .autocomplete() on the second input. This will properly update the contents of the second input based on the value of the first. However when focus is lost on the second box, the value is cleared out.
Code below: <input type="text" id="customer" name="customer" width=20 /> <input type="hidden" id="customer_id" name="customer_id" /> <input type="text" id="contact_name" name="contact_name" width=20 /> <input type="hidden" id="contact_id" name="contact_id" /> <script type="text/javascript"><![CDATA[ $(document).ready(function(){ $("#customer").autocomplete("search/customers_by_name.php", { matchContains: true, mustMatch: true, minChars: 0, width: 350, max:1000, scrollheight: 350 }); $("#customer").change(function() { if ("" == $("#customer").val()) { $("#contact_name").val(""); $("#contact_id").val(""); $("#contactdiv").html(""); $("#contact_name").unautocomplete(); } }); $("#customer").result(function(event, data, formatted) { if (data) { $("#contact_name").val(""); $("#contact_id").val(""); $("#contactdiv").html(""); $("#contact_name").unautocomplete(); $("#customer_id").val(data[1]); $("#contact_name").autocomplete("search/ contacts_by_customer_id.php", { matchContains: true, mustMatch: true, minChars: 0, width: 350, scrollheight: 350, extraParams: { c_id: function() { return $("#customer_id").val (); } } }); $("#contact_name").result(function(event, data, formatted) { if (data) { $("#contact_name").val(data[0]); $("#contact_id").val(data[1]); $("#contactdiv").html(data[2]); } }); } }); $("#contact_name").change(function() { if ("" == $("#customer").val()) { $("input#contact_name").flushCache(); $("input#contact_name").search(); $("#contact_name").val(""); $("#contact_id").val(""); $("#contactdiv").html(""); } if ("" == $("#contact_name").val()) { $("#contact_id").val(""); $("#contactdiv").html(""); } }); } //]]></script>