How to use jquery autocomplete with server/sql data fetched with php?

Question

Is there something wrong with this code?

Form input:

<input type="text" id="currentTag" name="currentTag" class="inputbox"/>

jquery:

$("#currentTag").autocomplete({
    source:'getautocomplete.php',
    minLength:1
});

getautocomplete.php

$term=$_GET["term"];
$query=mysql_query("SELECT * FROM table_name WHERE tag_value LIKE '%".$term."%' ORDER BY tag_value ");
$results=array();

while($row = mysql_fetch_array($query)){
    $results[] = array('label' => $row['tag_value']);
}
echo json_encode($results);

getautocomplete.php output when script is called directly:

[{"label":"birdseye"},{"label":"doggy"},{"label":"tomhat"}]

'SOLVED' It's a bit of a hack job, but I ended up setting source as a jquery var instead of url. Then used php include to echo the json into the var. All this in a Joomla site. Some conflict that I don't understand was happening, because the above code worked in a test file outside of Joomla. If anyone knows the conflict I'd curious to learn. Cheers.

$(document).ready(function() {
    $( "#currentTag" ).autocomplete({
        source: tags
    });
});
var tags = <?php include("getautocomplete.php");?>;

This might seem like a trivial question, but you do connect to your database first right? — Phillip
– Phillip, Commented Oct 10, 2014 at 8:56
What's the error/unexpected behaviour? Nothing happens? Exception? JS error? — artm
– artm, Commented Oct 10, 2014 at 8:58
i hope this is just an example because you will be hacked in seconds with SQL Injection — DarkMukke
– DarkMukke, Commented Oct 10, 2014 at 9:01
What you have to do is to make an ajax function to get the $results and set it in the source of the autocomplete. — Xlander
– Xlander, Commented Oct 10, 2014 at 9:01
Not relevant to whatever problem you are facing, but the fact that you are still using mysql_* instead of MySQLi or PDO is in itself wrong. Do you see any errors in your console. Is your autocomplete input not getting updated? — Spokey
– Spokey, Commented Oct 10, 2014 at 9:01

sasi kanth · Accepted Answer · 2014-10-10 09:20:56Z

1

see this link http://jqueryui.com/autocomplete/

Include all js .
Get the data from MySQL using Ajax. Proceed With
what you did now.

In the above link you will find demo source code see once

try this once

 $( "#currentTag" ).autocomplete({
source: function( request, response ) {
  $.ajax({
  url: "getautocomplete.php",
  dataType: "jsonp",
  data: {
 q: request.term
   },
   success: function( data ) {
  response( data );
   }
 });
 },
minLength: 3
  });

edited Oct 10, 2014 at 9:20

answered Oct 10, 2014 at 9:09

sasi kanth

2,9874 gold badges19 silver badges29 bronze badges

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

2 Comments

DarkMukke Over a year ago

dont provide links to examples, provide the examples themselves (you know in case the site goes down or something)

DarkMukke Over a year ago

besides, fromt he jquery api : String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data.

DarkMukke · Accepted Answer · 2014-10-10 09:06:06Z

0

There is a few thing wrong here, it could be any of the problems

i assume you connect to the db first, this is not shown in the example but that might be the problem
you should make sure you escape your $term, because you give the availability of SQL injection
you should avoid useing SELECT * if you only need tag_value
you should use mysql_fetch_assoc if you want to use assoc arrays in your result
you should make sure the source URL is correct, it is a relative path the way you've put it, try to always use absolute paths, you never know where your script will be used (and with pretty urls, this becomes worse)

answered Oct 10, 2014 at 9:06

DarkMukke

2,4891 gold badge24 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to use jquery autocomplete with server/sql data fetched with php?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related