设置 _renderItem 时单击/获取未定义的 ui.item答案

【问题标题】：Click / getting ui.item undefined when _renderItem set设置 _renderItem 时单击/获取未定义的 ui.item
【发布时间】：2015-04-02 04:38:43
【问题描述】：

我正在使用 jquery 自动完成进行编码，我的意图只是显示带有 ( [Image] [Name] ) 的自定义视图。当我只使用带标准渲染的自动完成代码（没有设置它）时，自动完成工作完美但没有图像，但是当我设置_RenderItem时，它会完全显示项目，但选择/聚焦时，我得到了UI.ITEM未定义。请你帮助我好吗？这是我的代码：

使用 Jquery-ui 1.11.2 和 Jquery 1.10.2：

$("#iSearch").autocomplete({

    source: function (request, response) {

        var psField = "produtoNome";

        $.ajax({
            url: "/Search/PesquisaParcial",
            data: "{'psField':'" + psField + "', 'psTerm':'" + request.term + "'}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                //{ label: item.ProdutoFoto, value: item.ProdutoNome }
                response($.map(data, function (item) {
                    return { label: item.ProdutoFoto, value: item.ProdutoNome, data: item };
                }));
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    focus: function (event, ui) {
        $("#iSearch").val(ui.item.value);
        return false;
    },
    select: function (event, ui) {
        $("#iSearch").val(ui.item.value);
        return false;
    },
    minLength: 2
}).autocomplete("instance")._renderItem = function (ul, item) {
    var produtoFoto = item.data.ProdutoFoto == null ? "../Images/semfoto.png" : "../Images/" + item.data.ProdutoFoto;
    var FotoHtml = "<img src='" + produtoFoto + "' width='35' height='30' />";
    return $("<li>")
        .append("<a>" + FotoHtml + "&nbsp;&nbsp;" + item.value + "</a>")
        .appendTo(ul);
};

【问题讨论】：

你能分享一些示例数据吗
当然！这是进行简单搜索时的答案。 JSon 下面：[{"Type": 0,"Produtoid": 138,"ProdutoNome": "camiseta ecológica","ProdutoFoto": null, "Feiranteid": 30, "FeiranteNome": "Aluísio de Paula","DescricaoFeirante ": "Camisetas ecológicas de garrafas pet", "EnderecoFeirante": "","Categoriaid": 8, "CategoriaPaiid": 1,"CategoriaNome": "Moda","CategoriaPai": null, "Descricaocategoria": "Moda" “barracaid”：30，“barracanome”：“Barraca 30”，“barracalatitude”：-25.427026，“barracalongitude”：-49.271824，“FeiraId”：1，“FeiraNome”：“Feira do Largo da Ordem”}]
看起来不错 - jsfiddle.net/arunpjohny/gxsmjx83/2
确实如此。通过小提琴它很好但是在我的代码中我不能点击并且焦点事件没有设置下拉列表值。我已经搜索了错误的库并尝试重新安装 jquery。我正在使用 VIsual Studio 2013。你知道可能是什么问题吗？

标签： c# jquery asp.net-mvc autocomplete

【解决方案1】：

我发现了问题！！！

好吧，我会在这里发帖，因为它可以帮助遇到同样问题的其他人。我做了什么来解决这个问题：

通过 nuget jquery 1.11.2 和 jquery-ui 1.11.2 安装
我在 index.cshtml 代码中直接链接到 jss 和 css，然后我从那里删除了它们

在 BundleConfig.cs 中，我刚刚插入了对 jquery-ui 的引用：

    bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui-{version}.js"));

将 javascript 自动完成代码放入 Index.cshtml 脚本部分，如下所示：

@section 脚本 { ...Javascript自动完成代码... }

祝自动完成工作愉快！

【讨论】：