ASP.NET MVC 视图上的 JQuery 自动完成

Question

在我看来，我有一个有效的 jQuery Autocomplete（bassistance 的那个）。问题是我只是没有得到这些东西。 MVC 操作返回 JSON 数据，插件很好地读出它并且过滤器效果很好 - 它列出了结果，我可以从下拉列表中进行选择。但是当我选择它时，什么也没有发生 - 我通过按 Enter 或单击它来选择一个项目。我想我必须以某种方式连接 result() 函数 - 我尝试使用 onItemSelect 选项但它不起作用，没有任何反应，result() 不会触发。

最后，我想要的是能够不断地将用户选择的项目添加到列表中。

我认为我的大部分问题通常来自于缺乏 jQuery 或 JavaScript 知识，我承认我从不喜欢但现在使用 ASP.NET MVC 我不得不学习它，事实上我发现它非常有用能够绕过回发..

这是我目前的代码：

<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>

查看：

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

另外请注意，我的解决方案需要启用和禁用 JavaScript，因此在我的最终解决方案中，我还想提供一个按钮控件，它可以对我的控制器操作执行回发和经典帖子，以将项目添加到列表中.

Answer 1

马，看这里： http://groups.google.com/group/jquery-en/browse_thread/thread/822a07c9d7d49d35

问题是自动完成建议您的数据始终是一个字符串，但在您的情况下它不是真的 - 您使用的是 json。

使用未打包的 autocomplete.js 并添加“s = s.toString();”就在你的脚本失败的那一行之前。

Answer 2

我相信你唯一需要改变的是你的结果方法。

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

您选择的项目（额外）在内部存储为<li>。因此，您需要获取 selectValue，而不是 val()。在过去的六个月里，我自己一直在与 JavaScript、JQuery 和 MVC 搏斗，所以我感受到了你的痛苦。