Autocomplete not working when added to a page with freindly url?

Autocomplete not working when added to a page with freindly url?

<script type="text/javascript">
         $(function () {
             $("#ctl00_ctlSearch_txtQuery").autocomplete({
            
                 source: function (request, response) {
                     var param = { keyword: $('#ctl00_ctlSearch_txtQuery').val() };
                     $.ajax({
                         url: "Autocomplete.aspx/GetProductName",
                         data: JSON.stringify(param),
                         dataType: "json",
                         type: "GET",
                         contentType: "application/json; charset=utf-8",
                         dataFilter: function (data) { return data; },
                         success: function (data) {
                             response($.map(data, function (item) {
                                 return {
                                     value: item
                                 }
                             }))
                         },
                         error: function (XMLHttpRequest, textStatus, errorThrown) {
                             //alert(textStatus);
                             console.log('error', textStatus, errorThrown);
                         }
                     });
                 },
               
                 minLength: 1//minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data. 
             });
         });
</script>