jquery autocomplete

Question

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

Dynamic data source using c# webmethod See this post: stackoverflow.com/a/35620970/5978806 — Husen
– Husen, Commented Feb 25, 2016 at 7:37

Josh · Accepted Answer · 2010-12-13 14:52:53Z

1

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

answered Dec 13, 2010 at 14:52

Josh

16.6k28 gold badges117 silver badges172 bronze badges

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

2 Comments

Gagan Over a year ago

thanks josh for quick response. But when i did as you said it didn't work well. I have my formatItem and formatResult as given below formatItem:function(row, i ,n){ console.log(row); return row.name; }, formatResult: function (row, i, n) { return row.name; }< I only got only one log from the console.log inside formatItem. The log is similar to this ["[{"id":"4cd8d3b37adf3515c800003e","name":"University of Alberta"},........]"]. if i am not wrong the log is suposed to print all the elements inside the json object.

Gagan Over a year ago

i also think the row arg of formatItem is not getting data in proper format.

Tyde · Accepted Answer · 2010-12-14 12:07:45Z

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>

Collectives™ on Stack Overflow

jquery autocomplete

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related