Alex Rivera | Logout

Issue with JSON parsing

Asked 2012-04-23T19:18:09.440
9

I am a complete noob with JSON parsing in jQuery. Thought I got the response... My data is in this form:

Array(
[1]=>abc,
[3]=>mango,
[4]=>apple,
[5]=>fruits
)

In this way I want this list to appear as an autocomplete list. I am using.

    jQuery("#name").autocomplete( '<?php echo HTTP_PATH.'/songs/sss'; ?>', {
    multiple: true,
    mustMatch: true,        
    matchContains: true,
    autoFill: false,
    dataType: "json",
    parse: function(data) {
            return jQuery.map(data, function(item) {
                return { data: item, value: item.label, result: item.label};
            });
        },
        formatItem: function(item) {
            return item.label;
        },
        formatResult: function(item) {
            return item.id;
        },
        formatMatch: function(item) {
            return item.label;
        }

});

I want the value when it shows list, i.e. the label from my data. When I select a label then it should show the label. But at the time of submission it should actually submit the key. I mean I want it to work as select box of HTML.

Returned JSON

 [{"id":1,"label":"Mehdi Hassan"},{"id":2,"label":"Jagjit Singh"},{"id":3,"label":"Suresh Vadekar"}]
javascript jquery json
Edit
Report

1 Answer

3

The problem looks like it's here:

jQuery("#name").autocomplete( '<?php echo HTTP_PATH.'/songs/sss'; ?>', { multiple: true, ...

It should be like this:

jQuery("#name").autocomplete( { source: '<?php echo HTTP_PATH.'/songs/sss'; ?>', multiple: true, ...

Also make sure you are using it on load/ready and not just inside a plain <script> tag

$(function(){ jQuery("#name").autocomplete(); });

Use firebug to verify that when you type a letter in that field it sends a request to the source page set for autocomplete.



Here is the code I used to re-create/fix your problem:

index.php

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
    $(function(){
        jQuery("#name").autocomplete({
            source: 'index_json.php',
            multiple: true,
            mustMatch: true,
            matchContains: true,
            autoFill: false,
            dataType: "json",
            parse: function(data) {
                return jQuery.map(data, function(item) {
                    return { data: item, value: item.label, result: item.label};
                });
            },
            formatItem: function(item) {
                return item.label;
            },
            formatResult: function(item) {
                return item.id;
            },
            formatMatch: function(item) {
                return item.label;
            }
        });
    });
</script>
</head>
<body>
    <form>
        <label for="name">Name: </label>
answered 2012-05-23T22:16:07.303

Your Answer