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);
     }
  });
});

**Ajax src file (checkmaterials.cfm)**

<cfquery name="qMaterial" datasource="MC">
    SELECT
        MaterialNumber
    FROM 
        [MC].[dbo].[Materials]
    WHERE
        MaterialNumber LIKE '#Request.Attributes.SearchTerm#%'
</cfquery>

<cfset arMaterials = ArrayNew(1)>
    
<cfif qMaterial.RecordCount>
    <cfloop query="qMaterial">
        <cfset ArrayAppend(arMaterials, StructNew())>
        <cfset arMaterials[qMaterial.CurrentRow].MaterialNumber = qMaterial.MaterialNumber>
    </cfloop>
</cfif>