So first let me tell you what I am trying to accomplish. I have a radio button, and depending on what value is selected I want to change the autocomplete source for a text box. So if the user selects option 1 on the radio button then get autocomplete list 1 and if they select option 2 on the radio button they should get autocomplete list 2.

If I assign an autocomplete at the top level:

2. $('#search-input').autocomplete({
3.     source: function (request, response) {
4.         var SearchType = $("input[name='SearchType']").val();
5.         console.log(SearchType);
6.         $.getJSON("https://rxnav.nlm.nih.gov/REST/spellingsuggestions.json?name=" + request.term, function (data) {
7.             response($.map(data.suggestionGroup.suggestionList.suggestion, function (value, key) {
8.                 return {
9.                     label: value,
10.                     value: value
11.                 };
12.             }));
13.         });
14.     },
15.     minLength: 3,
16.     delay: 300
17. });

That works just fine. If I try and define the autocomplete inside the change() of the radio button then I get a typeerror of "undefined is not a function" on line of the code below:

2. $("input[name='SearchType']").change(function(){
3.     var placeholder=$(this).val();
4.     $('#search-input').attr('placeholder',placeholder);
5.     //only populate drugs
6.     console.log(placeholder);
7.     console.log($('#search-input').val());
8.     if(placeholder == 'Drug'){
9. $('#search-input').autocomplete({
10.    source: function (request, response) {
11. $.getJSON("https://rxnav.nlm.nih.gov/REST/spellingsuggestions.json?name=" + request.term, function (data) {
12.    response($.map(data.suggestionGroup.suggestionList.suggestion, function (value, key) {
13. return {
14.    label: value,
15.    value: value
16. };
17.    }));
18. });
19.    },
20.    minLength: 3,
21.    delay: 300
22. });
23.     }else if (placeholder == 'Event'){
24. $('#search-input').autocomplete = null;
25. $('#search-input').autocomplete({
26.    source: function (request, response) {
27.        $.post("http://api.ohdsi.org/WebAPI/CS1/vocabulary/search", { 'QUERY':request.term, 'VOCABULARY_ID':'SNOMED','DOMAIN_ID':'Condition'}, function (data) {
28.    console.log(data);
29.            response($.map(data, function (value, key) {
30.                return {
31.                    label: value,
32.                    value: value
33.                };
34.            }));
35.        },'json');
36.    },
37.    minLength: 3,
38.    delay: 300
39. });
40.     }
41. });

Most of the issues I've seen with this are with the jquery.js file not being loaded properly, or being loaded twice etc which I know isn't the case here because it works when I just assign the autocomplete() not in another form handle's change() but just at top-level.

Any help appreicated, thanks in advance!