CODEWITHSUNDEEP
phpjqueryautocomplete
wikarus
wikarus

Reputation: 71

jQuery UI Autocomplete isn't working with external file in Source

So that's it... i have my jQuery Code like this:

jQuery:

<script type="text/javascript">
$(document).ready(function() {
    $('#val').autocomplete({
        source: "search.php",
    });
});
</script>

HTML: 

<input class="searchInput" id="val" name="val" type="text" />

PHP (search.php):

$con = mysql_connect("localhost","root","");
$db = mysql_select_db("x",$con);
$sql = mysql_query("SELECT * FROM opcionais WHERE Opcional LIKE 'Nokia%'");
$result = array();
while($linha = mysql_fetch_array($sql)){
    $result[] = $linha['Opcional'];
}
echo json_encode($result);

But here's the deal... when i open my search.php it came to me all the result in json... then, if i try the autocomplete he load all the results....... for example...

In the search.php i receive:

["Nokia","Nokia Lumia"]

Ok... in autocomplete, when i type "LUMIA" the widget load "Nokia" too. Buuutt..... if i copy the result i get in "search.php" and paste in a variable at the jquery script, the autocomplete works just fine.

Anyone knows why my external source of results doesn't works like if i put the results direct on a variable together with the jQuery Code?

Thanks in advance and sorry for my poor english :-)

EDIT:

So i put more images to show what happens... that way it's not working, it's like the SOURCE cannot accept the "$('#val').val()"...

my jquery search.php with get statement working search.php code

SOLVED

I've solved the problem by my self...

<script type="text/javascript">
$(document).ready(function(){
    $('#val').keyup(function(){
        var x = "search.php?ac=" + $('#val').val();
        $('#val').autocomplete({
            source: x,
            minLenght:5,
        });
    });
});
</script>

thanks for all responses :-)

Upvotes: 0

Views: 2394

Answers (2)

Salman
Salman

Reputation: 3726

It is natural for autocomplete(AC) to work when you use the javascript variable.. because AC will itself find out matching results from that variable (array). On the other hand, if you call search.php, AC will treat whatever it returns as the matching result, and will not try to match any further.

I actually think your query in the PHP script is somehow wrong and you need to debug that. You are typing LUMIA and the script is returning ['Nokia'] etc. That means it is running this query

SELECT * FROM opcionais WHERE Opcional LIKE 'Nokia%'

Whereas it should run

SELECT * FROM opcionais WHERE Opcional LIKE 'LUMIA%'

So there you go.

EDIT :

It seems that you are not sending the keyword LUMIA via ajax at all. Check documentation. What you need to do is change the js this way:

$('#val').autocomplete({
    source: "search.php?keyword="+$('#val').val(),
});

And in php:

$sql = mysql_query("SELECT * FROM opcionais WHERE Opcional LIKE 'Nokia ".$_GET['keyword']."%'");

Or maybe for better result:

$sql = mysql_query("SELECT * FROM opcionais WHERE Opcional LIKE '%".$_GET['keyword']."%'");

In addition I'd suggest using prepared statements in your query, these mysql functions are outdated.

Upvotes: 1

Reflective
Reflective

Reputation: 3917

Returned format should be like that: 

[
      {
            "label": "Nokia",
            "value": "1"
      },
      {
            "label": "Lumia",
            "value": "2"
      }
]

of course there is some variations and may be new versions of autocomplete have a bit different style. but always should be a pair of label and value.

You can add option dataType: 'json' to the request too.

I think that returning that kind of JSON will work too:

{1:'Nokia',2:'Lumia'}

Upvotes: 0

Related Questions