0

I have to do an auto complete text box in my app using jquery-ui. I have this Ajax script to get data from database:

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


    searchTxt = $("#searchTxt").val();
    $.ajax({
      url: '../php/autoComplete.php',
      data: {searchTxt: searchTxt},
      type: 'GET',
      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)
      }
    })

  } );

});
</script>

And here is the autoComplete.php script:

<?php
error_reporting(E_ALL);
ini_set("display_errors", 1);
require_once('connection.php');

$cid = $_SESSION['clinic_id'];
$searchTxt = '%'.$_GET['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);
?>

The problem is that I can see the data returned at the network tab of the developer tool but with another file returned with an error of The requested URL /ncd/... was not found on this server.

Here is an image of the situation where I can see an array returned with no errors:

enter image description here

And here is the other red file:

enter image description here

At the console:

enter image description here

I tried to change the type from get to post but still the same problem.

alim1990
  • 4,656
  • 12
  • 67
  • 130

1 Answers1

2

You don't have this structured correctly. Your ajax call should be a function of autocomplete. You have it inverted and it looks like it's assigned unexpected parameters to your autocomplete element.

See this example here for reference: https://jqueryui.com/autocomplete/#remote

Following that example, if we assume your AJAX endpoint returns properly structured data, your code should look something like this:

$( "#searchTxt" ).autocomplete({
  // I'd recommend using an absolute url.
  source: "/ncd/php/autoComplete.php"
});

If you open up your console and inspect the response in the documented example, the JSON data is structured like so:

[
  {"id":"Nycticorax nycticorax","label":"Black-crowned Night Heron","value":"Black-crowned Night Heron"},
  {"id":"Corvus cornix","label":"Hooded Crow","value":"Hooded Crow"},
  {"id":"Corvus corone","label":"Carrion Crow","value":"Carrion Crow"},
  etc...
]

So you'll probably want to update the way your endpoint structures its response.

klenwell
  • 6,978
  • 4
  • 45
  • 84
  • I got this error when I changed it to yours: `Notice: Undefined index: searchTxt in C:\wamp64\www\ncd\php\autoComplete.php on line 7` – alim1990 Jul 05 '17 at 05:27
  • Any more help will be appreciated – alim1990 Jul 05 '17 at 05:33
  • Review the documentation for the [source option](http://api.jqueryui.com/autocomplete/#option-source). You need to sync up your query parameters on front and back end. – klenwell Jul 06 '17 at 00:44