JQuery Autocomplete on ASP.NET MVC view

Question

I have a working jQuery Autocomplete (the one by bassistance) in my view. The problem is I am just not getting this stuff. The MVC action returns JSON data and the plugin reads it out nicely and filter works great - it lists the results and I can choose from the dropdown. But then when I choose it nothing happens - I select an item either with pressing Enter or by clicking it. I think I have to wire up the result() function somehow - I tried with onItemSelect option but it does not work, nothing happens, result() does not fire.

In the end all I want is to be able to continuously add item that user selects to a or to a list.

I think most of my problems come from the lack of jQuery or JavaScript knowledge in general, which I admit I never liked but now with ASP.NET MVC I am forced to learn it, in fact I do find it very useful being able to bypass the postbacks..

This is my code so far:

<script type="text/javascript">

$(document).ready(function() {
    $("#Products").focus().autocomplete('<%=Url.Action("GetProducts", "Product") %>', {
        dataType: 'json',
        parse: function(data) {
            var rows = new Array();
            for(var i=0; i<data.length; i++) {
                rows[i] = { data:data[i], value:data[i].product_id, result:data[i].product_name1};
            }
            return rows;
        },

        formatItem: function(row, i, n) {
            return row.product_PrettyId + ' - ' + row.product_name1 + ' (' + row.product_price + ' €) ';
        },      
        width: 900,
        minChars: 0,
        max: 0,
        mustMatch: true,
        onItemSelect: result,
    });
});

function result(extra) {
    $("#result").val(extra);
}   

</script>

View:

<div>
    <%=Html.TextBox("Products", null, new { style = "font-size: 20px; width: 900px"}) %>
</div>
<div id="result"></div>

Also please note that my solution needs to work with JavaScript enabled and disabled so in my final solution I would also like to provide a button control which would do a postback and classic post to my controller action for adding the item to the list.

Answer 1

I believe the only thing you need to change is your result method.

function result(extra) {
    $("#result").append(extra.selectValue);
}

The item that you've selected (extra) is stored internally as a <li>. Because of that, you need to get the selectValue, not the val(). I've wrestled with JavaScript, JQuery and MVC myself over the last six months, so I feel your pain.

Answer 2

Mare, look here: http://groups.google.com/group/jquery-en/browse_thread/thread/822a07c9d7d49d35

The problem is autocomplete suggest your data is always a string, but in your case it is not true - you're using json.

Use a non-packed autocomplete.js and add "s = s.toString();" just before the line where your script fails.