jQuery UI Autocomplete JSON response question

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".

jk. · Accepted Answer · 2011-09-21 00:00:06Z

3

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/

edited Sep 21, 2011 at 0:00

answered Sep 20, 2011 at 23:22

jk.

14.4k4 gold badges45 silver badges58 bronze badges

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

1 Comment

gregthegeek Over a year ago

Awesome! Just a note: I needed a different value than the label (cust_name and cust_nbr in my case). after "label: item.tagName" add a second line: "value: tagId". Also, my JSON return from server included a sub-array with the actual data, my customer info is in data.cust_data. In your $.map do: "$.map(data.cust_data, function(item){". (I am guessing I could have just use item.cust_data.cust_nbr) Just an FYI in case others come upon this.

Marc Schluper · Accepted Answer · 2014-06-23 16:50:45Z

0

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.

answered Jun 23, 2014 at 16:50

Marc Schluper

1811 silver badge2 bronze badges

Collectives™ on Stack Overflow

jQuery UI Autocomplete JSON response question

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related