jquery ui autocomplete with database

Question

I fairly new to JQuery and perhaps trying to achieve something that might be abit harder for a beginner. However I am trying to create an autocomplete that sends the curren

Answer 1

Finally found the solution that fits my needs

$("#login_name").autocomplete({
  source: function(request, response){
    $.post("/ajax/login_name.php", {data:request.term}, function(data){     
        response($.map(data, function(item) {
        return {
            label: item.user_login_name,
            value: item.user_id
        }
        }))
    }, "json");
  },
  minLength: 2,
  dataType: "json",
  cache: false,
  focus: function(event, ui) {
    return false;
  },
  select: function(event, ui) {
    this.value = ui.item.label;
    /* Do something with user_id */
    return false;
  }
});

Answer 2

A JSON strcuture is a flat string, while map expects an array or array like structure. try json decode on the string before using map.

Answer 3

Simple Jquery ui autocomplete, for those who might need it.

//select data from the table
$search = $db->query('SELECT Title from torrents');

//then echo script tags and variables with php
<?php echo '<script type="text/javascript">
 $(function() {
  var availableTags = [';
 foreach ($search as $k) {
  echo '"'.$k['Title'].'",';
}
  echo '];
$( "#tags" ).autocomplete({
  minLength:2, //fires after typing two characters
  source: availableTags
});
});
</script>';

 ?>

your html form

<div id="search">
<form id="search-form">
<input id="tags" type="text" />
<input type="submit" value="Search" />
</form>
</div>

Answer 4

some suggestions:

1. Why dataType= "jsop"? It doesn't appear to be jsonp. I think you want "json".
2. insert a cache : false in the options, as well. This insures the request is always made, and never satisfied from browser-side cache.
3. check if the call is going out, with something like Fiddler or Charles.
4. does your success fn get called? You have a alert() there. Does it get invoked?
5. if you have Firebug or the IE8 developer tools, you can put a breakpoint on the alert() to verify the value of the parameters.
6. Why specify the full hostname in the URL? Last night I had an odd situation with autocomplete where the response was null, the empty string, when I used a different hostname for the page and the Ajax request. When I modified it to use the same hostname, the request succeeded. Actually because of the same origin policy, you should have no hostname at all in the URL for the ajax call.

Answer 5

Yes you do need header info for your json

        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
        header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
        header("Cache-Control: no-cache, must-revalidate" ); 
        header("Pragma: no-cache" );
        header("Content-type: text/x-json");

and tvanfosson makes a good point abut the the plug

in anycase I don't think you make the ajax call the plugin does.

if you are infact using jquery-ui autocomple you should read over the documentation get a basic version running. your php is fine aside from the missing header data

Answer 6

I had a problem like you too. And now I fix it. The problem is my json that return from my server contain a syntax error.

In http://api.jquery.com/jQuery.getJSON/ tells that if there are some error in JSON, it will fail silently. The JSON must match the JSON standard here http://json.org/ .

For my error is my string in JSON is wrapping in only one quote. But the JSON standard accept only string that wrap in double quotes.

eg. "Hello World" not 'Hello World'

When you fix it you can set the source as string URL. The term will be in "term" query string. And it works!!