Autocomplete doesnt work - PHP - Mysql - jQuery

Question

When I type anything in the text box it doesn't display anything. The search.php shows all the records if I hardcode $searchTerm='a';

Probably it is something in the jQuery I am missing.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#skills" ).autocomplete({
      source: 'search.php'
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="skills">skills: </label>
  <input id="skills">
</div>
</body>
</html>

MY PHP (search.php) page is:

 //get search term
        $searchTerm = $_GET['term'];

        //get matched data from skills table
        $query = $db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' ORDER BY skill ASC");
        while ($row = $query->fetch_assoc()) {
            $data[] = $row['skill'];
        }

        //return json data
        echo json_encode($data);

Json

["A A EDU","A T Still","A.B.I. ","Aani", "Zane"]

Chrome Debug

Have you watched the AJAX request / response in the browser's developer tools? Are there an errors reported? Are you running this on a web-server? — Jay Blanchard, May 04 '16 at 18:07
[Little Bobby](http://bobby-tables.com/) says [your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! — Jay Blanchard, May 04 '16 at 18:07
You need to put the right json format similar to .. https://jqueryui.com/autocomplete/#multiple — Pardeep Poria, May 04 '16 at 18:10
Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). — Jay Blanchard, May 04 '16 at 18:15
Thanks, i will change it to prepared statement soon.but that doesn't help to me get the autocomplete work — user580950, May 04 '16 at 18:20
Try using header('Content-Type: application/json'); above echo json_encode($data); — Pardeep Poria, May 04 '16 at 18:28
@JayBlanchard I can see the Query string parameters term=a sent,http://prntscr.com/b09jjm http://prntscr.com/b09lo0 — user580950, May 04 '16 at 18:30

score 2 · Accepted Answer · answered May 04 '16 at 19:40

I can´t see the send params (data) to you server call.

like this (but i haven´t right if this work):

$(function() {
   $( "#skills" ).autocomplete({
      source: 'search.php',
      data: { 
         'term' : $('#skills').val()
      },
      type: "GET"
   });
});

I prefer use a plugin to do this, in the method AJAX is possible set the results to list in field. like this:

$('#field_auto_complete').autocomplete({
    lookup: function (query, done) {
        $.ajax({
            url: "form.php",
            dataType: "json",
            data: { 
                    term     : query 
            },
            type: "GET", //you can change to POST if u need
            success: function( response ){
                var result = {
                    suggestions: response.results
                };
                done(result);   
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) { 
                $.redirect('../error');
            }
        });
    },
    onSelect: function (suggestion) {
        id_ofselected = suggestion.data; //set a var with selected object
    }
});

In the Php Side u have a code like this:

$digits = $_GET['term'];

$query = $db->query(SELECT name AS `value`, id AS `data` 
          FROM table 
          WHERE name LIKE '$digits%'");

while ($row = $query->fetch_assoc()) {
    $data[] = $row['skill'];
}

if(isset($data[0])){
    echo json_encode(array( 'results' => $cons ));
}else{
    echo json_encode(array( 'results' => array());  
}

I use Autocomplete Jquery plugin. See [a link] (https://github.com/devbridge/jQuery-Autocomplete)!

score -2 · Answer 2 · answered May 04 '16 at 18:53

-2

{
    source: function( request, response ) {
      $.getJSON( "search.php", {
        term: extractLast( request.term )
      }, response );
    }

answered May 04 '16 at 18:53

Heidar Ammarloo

421
2
11

how does it gets assigned to #skills – user580950 May 04 '16 at 19:06

Autocomplete doesnt work - PHP - Mysql - jQuery

2 Answers2