CODEWITHSUNDEEP
jqueryautocomplete
Gagan
Gagan

Reputation: 4388

jquery autocomplete

i have problem about remote jquery autocompete

i get a json object from the server in this format

[{"id":"4cd8d3b37adf3515c800003e","name":"University of Alberta"},
 {"id":"4cd8d3b37adf3515c800003f","name":"Athabasca University"},
 {"id":"4cd8d3b37adf3515c8000040","name":"University of Calgary"},
 {"id":"4cd8d3b37adf3515c8000041","name":"University of Lethbridge"},
 {"id":"4cd8d3b37adf3515c8000042","name":"Mount Royal University"},
 {"id":"4cd8d3b37adf3515c8000043","name":"University of Toronto"},
 {"id":"4cd8d3b37adf3515c8000045","name":"Queens University"},
 {"id":"4cd8d3b37adf3515c8000046","name":"University of Waterloo"},
 {"id":"4cd8d3b37adf3515c8000047","name":"McGill University"},
 {"id":"4cd8d3b37adf3515c8000048","name":"University of British Columbia"},
 {"id":"4cd8d3b37adf3515c8000049","name":"University of Saskatchewan"},
 {"id":"4cec8ead7adf3502a100001f","name":"University of Alberta"}]

Now what i need to do is only show the names of the university in the autocomplete list and populate the corresponding id in one hidden field when the user selects the university.

i tried moving aroung formatResult and formatItem with this json object but couldn't figure out how to autocomplete.

It would be helpful if someone explain how to apply formatResult and formatItem methods of jquery autocomplete with json objects

Thanks

Upvotes: 2

Views: 1324

Answers (2)

Tyde
Tyde

Reputation: 252

You can use a getJson to get the data i and then use some thing like this to make it autocomplite

<body>
    <br /><br />API Reference: <input id="example" /> (try "U")<br /><br />
    ID for selectet university <span id="UniID"></span>
    <script type="text/javascript">
        $(function() {
            $.getJSON('JSonUni.txt' , function(autoData) { // Get the data for autocomplite
                $("#example").autocomplete(autoData, {
                    formatItem: function(item) {
                        return item.name;
                    }
                }).result(function(event, item) {
                    $('#UniID').text(item.id);
                });
            }); // end JSON
        }); // End function
    </script>
</body>

Also include this lines

<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>

Upvotes: 0

Josh
Josh

Reputation: 16567

I do something similar, but I also have images in my results. As you can see, my code supports multiple selection.

formatItem: function (row, i, n) {
            return '<table><tr><td valign="top"><img src="' + row.ImageUrl + '" /></td><td valign="top">' + row.DisplayName + '</td></tr></table>';
        },
formatResult: function (row, i, n) {
            return row.Id;
        }
}).result(function (event, data, formatted) {
        var results = $("#selectedItems").val();
        $("#selectedItems").val(results + ";" + data.Id)
    });

so for yours, I would try this

formatItem: function (row, i, n) {
            return '<span>' + row.name+ '</span>';
        },
formatResult: function (row, i, n) {
            return row.id;
        }
}).result(function (event, data, formatted) {
        $("#myHiddenField").val(data.id)
    });

EDIT: Added the result function to put the id into a hidden field

Upvotes: 1

Related Questions