jQuery UI autocomplete ajax with multiple values

Question

I've checked several solutions like this:

jQuery UI Autocomplete Multiple Values in Textbox
jQuery UI Autocomplete Multiple Values

with no success. I have a jQuery UI autocomplete working very well with the exception of search phrases with spaces in them. For instance, I'll search "real" and get a list of results but if I enter "real estate" it bombs out after "real ".

Here's my current working code up to adding a space in the textbox:

<script type="text/javascript">        
$(document).ready(function () {           
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx',
                data: { 'searchtext' : encodeURIComponent(request.term), 'langspecific' : '1' },
                dataType: 'json',
                success: function(jsonData) {
                    response(jsonData);
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});

Here is some code I tried from above links but continue to receive the "Uncaught TypeError: Cannot read property 'autocomplete' of undefined" error

<script type="text/javascript">   
$(document).ready(function () {
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx',
                data: { 'searchtext' : encodeURIComponent(request.term) },
                dataType: 'json',
                success: function(jsonData) {
                    var re = $.ui.autocomplete.escapeRegex(request.term); // errors out here
                    var matcher = new RegExp( "^" + re, "i" );
                    response($.grep(jsonData, function(item){return matcher.test(item.value);}) );
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});

When I debug it I'm not getting much detail (not a strong front end dev) other than the error I already mentioned.

Answer 1

After further testing I found the issue was with where I placed and encoded my parameters. The code below is what I started with:

<script type="text/javascript">        
$(document).ready(function () {           
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx',
                data: { 'searchtext' : encodeURIComponent(request.term), 'langspecific' : '1' }, // problem here
                dataType: 'json',
                success: function(jsonData) {
                    response(jsonData);
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});  

</script>

And this is what I ended up with. Note I removed the data attribute and simply created a query string.

    <script type="text/javascript">        
$(document).ready(function () {           
     /* auto complete for the menu search option */
    $("#txtSearchProgram").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: '/SpecialPages/Program-Autocomplete.aspx?searchtext=' + encodeURIComponent(request.term) + '&langspecific=1', // resolved
                dataType: 'json',
                success: function(jsonData) {
                    response(jsonData);
                }
            });
        },
        delay: 0,
        minLength: 2,
        open: function() {
            $(this).autocomplete("widget")
                   .appendTo("#autocomplete-results")
                   .css("position", "static")},
        focus: function( event, ui ) {
          $(this).attr("placeholder", ui.item.label);
          return false;  
        }, 
        select: function (event, ui) {
            event.preventDefault();
            var url = ui.item.value;
            if (url != '#') {
                location.href = url;
            }
        }
    });
});  

</script>