Autocomplete with AJAX -data issue

it looks like your getresults() expects a q parameter to be passed, so in data, send q with the value of the search box data: { q: $('#search-box').val() }

Try with this:

$(document).ready(function(){

  $('#search-box').on('keyup', function () {

    var userText = $(this).val().trim();

    if (userText.length > 0) {
      $.ajax({
        url: BASE_URL + 'shop/search',
        type: "POST",
        data: {
        q: userText
    },
        success: function (response) {

          if (response) {

            var availableTags = [];

            $.each(response, function (key, value) {
              availableTags.push(value.title);
            });

            $('#searchField').autocomplete({
              source: availableTags,
              select: function (event, ui) {
                $('.submit-btn').click();
              }
            });

both of them doesn't work):

What does "doesn't work" mean? If you open the dev tools in your browser and check the network tab when you send the ajax request, is it sending the q parameter with the content of your search box term?

it says "Uncaught SyntaxError: Unexpected string" on

 $('#search-box').on('keyup', function () {

Looking at the code you posted again, you have

$.ajax({

$(document).ready(function(){

That $ajax is out of place and not formed correctly

How should I place it?

get rid of the $.ajax({ at the top of the page before the $(document).ready

that isn't even formed correctly, so nothing after it will run because it's a syntax error. There isn't a closing } or ) or ; and its not even doing anything.

I think you should post the entire js code. You didn't show what you have at the bottom of the page and you could have more errors there.

ok, this is the all page

$('.sm-box').delay(2000).slideUp();


$('.add-to-Cart').on('click', function(){

  
   
   $.ajax({
       url: BASE_URL + 'shop/add-to-cart',
       type: "GET",
       datatType: "html",
       data: {id: $(this).data('id') },
       success: function (response){
           location.reload();

       }
   });
   });
   $('.update-cart-btn').on('click', function(){
           $(this).data('id');
           $(this).data('op');
           
           $.ajax(
                   {
                       url:BASE_URL +'shop/update-cart',
               type: "GET",
               dataType:"html",
               data:{id:$(this).data('id'), op: $(this).data('op')},
               success: function (response){
                   location.reload();
               }
                   });
   });
   
   $('.origin-text').on('keyup',function(){
       var origin=$(this).val().trim().toLowerCase().replace(/\s/g, '-');
       $('.target-text').val(origin);
   }  );
   
   
   
   
   
   
 



  $('#search-box').on('keyup', function () {
       
    var userText = $(this).val().trim();

    if (userText.length > 0) {
      $.ajax({
        url: BASE_URL + 'shop/search',
        type: "GET",
        dataType: "json",
       data: { q: $('#search-box').val() },
        success: function (response) {

          if (response) {

            var availableTags = [];

            $.each(response, function (key, value) {
              availableTags.push(value.title);
            });

            $('#search-box').autocomplete({
              source: availableTags,
              select: function (event, ui) {
                $('.submit-btn').click();
              }
            });

          }

        }
      });
    }
  }
 );

So what happens when you run it after removing that ajax call? You also removed the document ready event, so it might be none of this is working now.

I found the solution from Laravel Autocomplete search from Database

I fixed the code:

 
$(document).ready(function(){


  $('#search-box').on('keyup', function () {
       
    var userText = $(this).val().trim();

    if (userText.length > 0) {
      $.ajax({
        url: BASE_URL + 'shop/search',
        type: "GET",
        dataType: "json",
       data: { q: $('#search-box').val() },
        success: function (response) {

          if (response) {

            var availableTags = [];

            $.each(response, function (key, value) {
              availableTags.push(value.title);
            });

            $('#search-box').autocomplete({
              source: availableTags,
              select: function (event, ui) {
                $('.submit-btn').click();
              }
            });

          }

        }
      });
    }
    }
 );

but now it sais: "jquery.circliful.min.js:1 Uncaught ReferenceError: jQuery is not defined at jquery.circliful.min.js:1" on

 
$(document).ready(function(){