CODEWITHSUNDEEP
jqueryjquery-uiautocomplete
Hugo
Hugo

Reputation: 21

jQuery UI Autocomplete JSON response question

I've done a ton of research and I still don't get how to use jQuery ui autocomplete. The auto complete does not work and I'm not sure why. Any help would be appreciated it!

I have the following on the frontend. 1. jQuery correctly linked. 2. jQuery-ui correctly linked. 3. jQuery-ui css correctly linked.

<script>
$("#tags").autocomplete({
source: function(request, response){
$.post("/panel/tags.php", {data:request.term}, function(data){     
    response($.maps(data, function(item) {
    return {
        label: item.tagName,
        value: item.tagID
    }
    }))
}, "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;
}

});
</script>


<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags" size="50" />
</div>

On the backend:

$query_tags = "SELECT tagID, tagName FROM DCB_Tags WHERE tagName LIKE '".$_GET['tags']."%' ORDER BY tagName ASC LIMIT 10";
$result_tags = mysql_query($query_tags)  or die ("Error: " . mysql_error());

$response = array();
$tags = array();
while($row=mysql_fetch_array($result_tags)) 
{ 
$tagID=$row['tagID']; 
$tagName=$row['tagName']; 
$tags[] = array('tagID'=> $tagID, 'tagName'=> $tagName);

} 

header("content-type: text/javascript");
echo json_encode($tags);
exit();

Output for this is:

[{"tagID":"1","tagName":"art"},{"tagID":"4","tagName":"art shows"},{"tagID":"3","tagName":"artist"},{"tagID":"2","tagName":"design"}]

If you access the page by putting ?tag=art it correctly eliminates "design".

Upvotes: 2

Views: 9813

Answers (2)

Marc Schluper
Marc Schluper

Reputation: 181

I put "alert(data.length);" at the start of the success function, to check whether the data received from the server was correct. It made the jquery control fail to display anything upon receiving the data.

Upvotes: 0

jk.
jk.

Reputation: 14435

It looks like you are doing a post then trying to pick up $_GET['tags'] on the php page. So, try using an ajax function and picking up $_GET['term'] on you php page. Also, $.maps is not a function. I think you meant $.map.

And, if you want the label as the value of the input, then don't specify a value field. The autocomplete will use label for both if you only specify one.

jQuery autocomplete:

$("#tags").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "/panel/tags.php",
            dataType: "json",
            data: {term: request.term},
            success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item.tagName
                       };
                }));
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
      /* Do something with user_id  */
    }
});

PHP:

$query_tags = "SELECT tagID, tagName FROM DCB_Tags WHERE tagName LIKE '".mysql_real_escape_string($_GET['term'])."%' ORDER BY tagName ASC LIMIT 10";

Link to tutorial: http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-source-json-does-not-contain-label-or-value-fields/

Upvotes: 3

Related Questions