CODEWITHSUNDEEP
jqueryajaxautocomplete
John
John

Reputation: 51

Jquery autocomplete not returning anything!

I have the code below that has stopped working all of a sudden. The auto complete doesn't bring up any results.

I made a temp form to manually send the data, it return json data fine. Then I tested the ajax was actually making a request by saving the json to a text file when the page is called, that worked.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Customer Management System</title>
<link type="text/css" href="http://localhost/stack_ci_2/public_html/includes/jquery/css/smoothness/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
<script type="text/javascript" src="http://localhost/stack_ci_2/public_html/includes/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://localhost/stack_ci_2/public_html/includes/jquery/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

// Get matches for customer search.
    $("#customer_search_ref").autocomplete({
        minLength: 2,
        source: function(request, response) {
            $.ajax({
                url: "<?php echo site_url('customer/ajax_customer_search'); ?>",
                data: { term: $("#customer_search_ref").val()},
                dataType: "json",
                type: "POST",
                success: function(data){
                response(data);
                }
            });
        },
        // Inputs customer data into forms.
        select: function(event, ui){
            $("#customer_name").focus();
            $("#tabs").tabs("select",0);
        }
    });

});

JSON data returned on manual post and in text file.

[{"id":"114","name":"Claire","surname":"Taylor","address_1":"add1","address_2":"add2","address_3":"add3","city":"city","county":"county","postcode":"postcode","country":"country","email":"email","home_tel":"home","mobile_tel":"mobile","work_tel":"work","notes":"notes","value":"Claire Taylor - 114","label":"114 - Claire Taylor"}]

I thought it might be the label and value not being returned but it is.

Also the js and css files are being loaded successfully and XHR requests all these have been tested in firebug.

Any ideas?

Upvotes: 0

Views: 1239

Answers (4)

Qpi
Qpi

Reputation: 404

You can use the $.map method to merge your data to create a right response

success: function(data){
    var result = $.map(data, function(item){
        return {
            label: item.name,
            value: item.id
        }
    });
    response(result);
}

Upvotes: 0

Dalen
Dalen

Reputation: 8996

check out this: Having problems with jQuery UI Autocomplete

you have to use label and value as main property names of your json object

Upvotes: 1

Anooj
Anooj

Reputation: 286

I guess your returned JSON is not as per the format which source needed. I think it is suppose to be ['value1','value2',.....] and not [{key:value1,key2:value2}].

Please refer the jquery UI autocomplete source options once more.

Upvotes: 0

James Lin
James Lin

Reputation: 26528

I suggest you use firebug console to look at the response content.

Upvotes: 0

Related Questions