My jQuery autocomplete is not working

Question

Im trying to use jQuery autocomplete to show my title of news while Im writting on my search form.

But Im having a problem, when Im writing in my search input nothing appears.

I have my header.php file where I have this script to start jQuery autocomplete:

$(function(){
  $('.j_autocomplete').autocomplete({
    source: "search.php",   
  });
});

I also have in my header.php a menu with a search form:

<nav id="menu">
  <ul>  
       <li><a href="">Home</a></li>
       .....
       <li>
         <form id="search">
            <input name="search" class="j_autocomplete" type="text"  placeholder="Search..." />
            <button type="submit">Search</button>
         </form>
      </li>
  </ul>

And then I have my source, that is my search.php file, where Im selecting my news title to show on my jQuery autocomplete:

<?php

$search= $_GET['term'];
$readNews = $pdo->prepare("SELECT * from news WHERE title LIKE ? ORDER BY title ASC");   
$readNews->bindValue(1, "%$search%", PDO::PARAM_STR);
$readNews->execute(); 

$resJson = '[';
$first = true;

while($res = $readNews->fetch(PDO::FETCH_ASSOC))
{
  if(!$first)
  {
    $resJson .= ', ';
  }
  else
  {
    $first = false;
  }
    $resJson .= json_encode($res['title']);
  }

$resJson .= ']';

echo $resJson;

?>

Everything looks fine for me, and If in my search.php file I put only this code below, I get all this 4 names when I start to writing in my autocomplete, so it seems that my source is also correct:

<?php
$result = array("Henry","Tom","Terry","Chris");
echo json_encode($result);
?>

Do you see where might be my error?

In autocomplete documentation says that 'term' is querystring key to use, but I suspect that is something about my $_GET['term'] that is not working correctly, but I already tested with $_REQUEST['term'] and also dont works!

Answer 1

I'm sympathetic to your plight - I was in the same mess about a year ago, and then I received some great help here on SO.

All of my errors with autocomplete were because I was not presenting a true json file to the autocomplete function. So I learned that for each and every PHP file that you write, run it as a stand-alone, grab the screen output, and test it with jsonlint.

The second thing I was taught is that it may be easier (if you don't have too many variables to read) if you call the entire file with your php first, then present it to the autocomplete function. Once I started with these two steps, I haven't had a major glitch since. Hope it helps you.

JS

$(function(){ 
             $.ajax ({
                      url: "../php/insurancesinglevarjson.php",
                 dataType: "json"
                      })
                        .done(function (data) {
                                               console.dir(data);
                                               var source = data;
                                               $("#companyname").autocomplete({
                                                                               source: source});
                                                                               });
                       });

Answer 2

EDIT: After hours of debugging, and structure changes we finally got it to work.

The problem were a mix of .htaccess rewrites and some small bugs in the previous code.

I'm not sure how to describe everything we did to make it work.

--

Try building your json string more robust.

$data = array();

while($res = $readNews>fetch(PDO::FETCH_ASSOC))
{
  $data[] = $res['title'];
}

echo json_encode($data);

EDIT: To check for undefined index, typ

$search = isset($_GET['term']) ? $_GET['term'] : "";