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

Question

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 :-)

Salman · Accepted Answer · 2012-10-29 22:42:47Z

1

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.

edited Oct 29, 2012 at 22:42

answered Oct 29, 2012 at 20:44

Salman

3,7362 gold badges26 silver badges34 bronze badges

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

5 Comments

wikarus Over a year ago

Actually, the Query is returning every NOKIA CELLPHONE MODEL in the database... and i have 10 models with LUMIA in the name... so when i made the query with "NOKIA%" and i type "LUMIA" should return all "NOKIA LUMIA XX" that exists... got?

Salman Over a year ago

It seems that you are not sending the keyword LUMIA via ajax. Check my edit.

wikarus Over a year ago

I've updated some screens with your tip... but still doesn't working :( Observe in the jQuery code, if i put

<script type="text/javascript"> $(function(){ 	$('#val').autocomplete({ 		source: "search.php?ac=lumia", 		minLength: 5, 	}); }); </script>

specifying the GET statement, the plugin works well... :(

Salman Over a year ago

Looking at the screenshot, I think you should add the script below your HTML. Also looking at your solution. you should not be calling autocomplete() in a keyup() event. That is quite wrong.

wikarus Over a year ago

Ok, i tried to use your tip putting the script below my html but without success too... and using the autocomplete() in a keyup() worked well for me... so i think it's a solution. But thanks anyway :-)

Reflective · Accepted Answer · 2012-10-29 19:59:25Z

0

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'}

edited Oct 29, 2012 at 19:59

answered Oct 29, 2012 at 19:52

Reflective

3,9371 gold badge17 silver badges25 bronze badges

1 Comment

wikarus Over a year ago

i have exactly that return in Search.php: {1:'Nokia',2:'Lumia'} And that time i can't even get AC work i've downloaded the last version of AutoComplete from jqueryUI

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related