Jquery Autocomplete library returning array with no properties from PHP Script

Question

I am adding an autocomplete library into my project using the jquery-ui library.

I created the PHP script from which I need to get the data:

<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
require_once('connection.php');
$cid = $_SESSION['clinic_id'];
$searchTxt = '%'.$_POST['searchTxt'].'%';
$res = array();
$getPatients = "SELECT * FROM patient WHERE clinic_id = :cid and patient_name_en LIKE :searchTxt ORDER BY patient_id DESC";
$execGetPatients = $conn->prepare($getPatients);
$execGetPatients->bindValue(':cid', $cid);
$execGetPatients->bindValue(':searchTxt', $searchTxt);
$execGetPatients->execute();
$getPatientsResult = $execGetPatients->fetchAll();

$i = 0;
foreach($getPatientsResult as $result)
{
    $res[$i] = $result;
    $i++;
}

echo json_encode($res);
?>

And the JavaScript part is here:

<script>
$( function() {
  $("#searchTxt").on('keyup', function(){


    searchTxt = $("#searchTxt").val();
    $.ajax({
      url: '../php/autoComplete.php',
      data: {searchTxt: searchTxt},
      type: 'POST',
      dataType: 'JSON',
      success:function(resp)
      {
        $.each( resp, function(key, result)
        {
          var availableTags = result['patient_name_en'];
        });
      },
      error:function(resp)
      {
        console.log(resp)
      }
    })

  } );
$( "#searchTxt" ).autocomplete({
      source: availableTags
    });
});
</script>

I had the following error in the console about jQuery:

Maximum call stack size exceeded.

But now it gone somehow, and I don't know why.

Now after typing in the search text box, I am getting an empty array at the network tab of the developer tool or an array but with no properties and nothing is show as autocomplete near the text box:

EDIT

I changed a line in PHP into:

$searchTxt = '%'.$_POST['searchTxt'].'%';

And now no php errors, but a JavaScript error:

Uncaught ReferenceError: availableTags is not defined

Try printing the array on the back end side and see if the array gets populated. The problem could be in your SQL query. — Nir Tzezana
– Nir Tzezana, Commented Jul 3, 2017 at 8:30
I fixed it now data appears at the network tab but I had the following error, please see the edit in a minute — alim1990
– alim1990, Commented Jul 3, 2017 at 8:34

Shiladitya · Accepted Answer · 2017-07-03 08:39:44Z

1

$( "#searchTxt" ).autocomplete({
  source: availableTags
   });  


success:function(resp)
  {
    $.each( resp, function(key, result)
    {
      var availableTags = result['patient_name_en'];
    });
  },

You have declared the availableTags inside the success method of ajax call and you are trying to access it outside it's scope.

Either you make availableTags as global variable or declare somewhere on the top so that you can access it in both the places ( for reassigning after ajax success and in the autocomplete method).

answered Jul 3, 2017 at 8:39

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

alim1990 Over a year ago

Okay now a new error: Failed to load resource: the server responded with a status of 404 (Not Found) – droidnation 42 secs ago edit and a link with what I typed inside the text box as not found too: The requested URL /ncd/pages/Walid was not found on this server.

Shiladitya Over a year ago

It means the requested url is not able to serve the request. Please check the ajax call url is correct or not.

Shiladitya Over a year ago

After making all the change did you push your code to some other location??? I am asking this question because I see the requested URL changed from /ncd/php to ncd/pasges/Walid.

alim1990 Over a year ago

No. How I know if I mistakenly pushed i t?

MehulJoshi · Accepted Answer · 2017-07-03 08:40:16Z

1

 $( "#searchTxt" ).autocomplete({
      source: availableTags
    });
});

this code gets executed before your post gets success, it's non-blocking, so you have to write it something like.

$( function() {
  $("#searchTxt").on('keyup', function(){


    searchTxt = $("#searchTxt").val();
    $.ajax({
      url: '../php/autoComplete.php',
      data: {searchTxt: searchTxt},
      type: 'POST',
      dataType: 'JSON',
      success:function(resp)
      {
        $.each( resp, function(key, result)
        {
          var availableTags = result['patient_name_en'];
          $( "#searchTxt" ).autocomplete({
      source: availableTags
    });
});

        });
      },
      error:function(resp)
      {
        console.log(resp)
      }
    })

  } ); 
});

answered Jul 3, 2017 at 8:40

MehulJoshi

8898 silver badges19 bronze badges

3 Comments

alim1990 Over a year ago

Failed to load resource: the server responded with a status of 404 (Not Found)

alim1990 Over a year ago

and a link with what I typed inside the text box as not found too: The requested URL /ncd/pages/Walid was not found on this server.

MehulJoshi Over a year ago

then the issue is with your php code, fix it and it's done

Collectives™ on Stack Overflow

Jquery Autocomplete library returning array with no properties from PHP Script

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related