I am using jQuery autocomplete via source as ajax call, but its not getting results I want. when I type in numbers, I get invalid json error, I have a backend call (checkMaterial) that runs a query based on the search term and returns suggestions, but I keep getting errors like invalid json or “Uncaught TypeError: Cannot read property ‘length’ of undefined”. I don’t see how request.term is passing the value I type in the text field also. Any suggestions?

Here is my code: HTML

 <input type="text" id="MaterialSearchID" placeholder="Type here to start searching">
 <div id="Suggestions"></div>

JQuery:

  $(document).ready(function()
   {
   $("#MaterialSearchID").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: 'post',
            url: '/_scripts/ajax/checkMaterials.cfm',
            data: {searchPhrase: request.term},
            dataType: 'json',
            error: function(xhr, textStatus, errorThrown) {
                // show error
                alert(errorThrown)
            },
            success: function(result) {
                response(result);
            }
        });
    },
    select: function(event, ui) {
        $('#Suggestions').val(ui.item.id);
     }
  });
});