using jquery autocomplete

In an old web form application I had a combobox with a growing unmanageable number of entries.  I decided to enter the 21'th century and replace it with a client side autocomplete box.  With jquery ui it was supposed to be easy and after 4 days of pain and agony I got it to work.  The basic functionality is this.  The user selects a country and then types in his institution in the autocomplete box and the code finds her institution.   The autocomplete uses a webapi that I built just for this box.  This was done with MVC webapi and was very easy. 
Getting the javascript to work was not.
Here are the main problems I had:
1)  The autocomplete list does not show up while in debug mode of the javascript.  You can debug to see what happens, but the drop down list will not show up until all the breakpoints are removed. 
2)  When I finally got it working using the  localhost api via visual studio, it stopped working when I deployed the webapi to the server, in spite of it the webapi working on the server and serving the correct json to the script (which I was able to detect in fiddler).  The problem was that the url I used was the full website and for some reason it generated an error.  (http://www.bard-isus.com/BS/api/inst).  Though the server was contacted and it returned proper json, the error message was hit.  Only when I changed it to /BS/api/Inst, did the error message go away.



here is the code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" >
var mymessage = "Try again with any part of your institution name.";
$(document).ready(function () {
$("#Institution").autocomplete({
source: function (req, res) {
$.ajax({
 url: '/BS/api/Inst/' + req.term + "?cty=" + $("#Country")[0].value,

type: "GET",

dataType: "json",

success: function (data) {

res($.map(data, function (item) {

return {
label: item.InstLongName,
Instcode: item.instcode,
value: item.InstShortName
};
}));
},error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(mymessage);
}
});
},
minLength: 4,
delay: 500,
  select: function (event, ui) {
$("#cbIsInst").val(ui.item.Instcode);

}
});
}); </script>

Here are the relevant controls:
<asp:label id="Label11" runat="server"  Width="72px" Height="24px">Country</asp:label>
<asp:dropdownlist id="Country" runat="server" Width="160px" AutoPostBack="True">

<asp:ListItem Value="NoChoice">Please Choose</asp:ListItem>
<asp:ListItem Value="Israel">Israel</asp:ListItem>
<asp:ListItem Value="USA">USA</asp:ListItem>
</asp:dropdownlist>
<div class="ui-widget">
<asp:TextBox id="Institution"
tabIndex="8" runat="server" Width="216px" Visible="True"/>
<asp:TextBox ID="cbIsInst" runat="server" CssClass="instclass" visible="false"></asp:TextBox>
</div>