【问题标题】:Selecting an autocomplete item is not working选择自动完成项目不起作用
【发布时间】:2014-09-26 18:03:15
【问题描述】:

我的 asp.net mvc web 应用程序中有以下字段:-

<input  class="push-up-button searchmargin" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "@Url.Action("AutoComplete", "Home")" type="text" style="margin-top:8px"/>

我写了以下自动完成功能:-

$("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({
            source: target.attr("data-autocomplete-source"), minLength: 1, delay: 1000,

            create: function () {
                $(this).data("autocomplete")._renderItem = function (ul, item) {
                    return $('<li>').append('<a>' + item.label + '<br>' + item.resourcename + ' | ' + item.customername +  ' | ' +item.sitename + '<hr>' +'</a>')
                                    .appendTo(ul);
                };
            }
        });
    });

目前自动完成运行良好(将显示结果列表),但问题是如果我从自动完成结果中选择一个项目,它将不会在自动完成字段内呈现。当我检查firebug 我在选择自动完成项目时注意到以下错误:-

TypeError: item is undefined
[Break On This Error]   

self.element.val( item.value );

例如,如果我开始输入以下单词“我是”,然后我从自动完成列表结果中选择“我正在写作”,那么自动完成字段将有“我是”文本而不是选择“我是”写作”。哪位大神可以指教一下,这个问题是什么原因造成的?

谢谢

编辑

我通过添加焦点和选择来编辑我的自动完成功能:-

 $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({
            source: target.attr("data-autocomplete-source"), minLength: 1, delay: 1000,
            focus: function (event, ui) {
                $("input[data-autocomplete-source]").val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $("input[data-autocomplete-source]").val(ui.item.label);
                return false;
            },

            create: function () {
                $(this).data("autocomplete")._renderItem = function (ul, item) {
                    return $('<li>').append('<a>' + '<b>'+item.label + '</b><br>' + '<span style="color:#8e8e8e ">' + item.resourcename + ' | ' + item.customername + ' | ' + item.sitename + '<hr style="padding: 0px; margin: 0px;">' + '</span></a>')
                                    .appendTo(ul);
                };
            }

        });
    });

但是当我尝试选择一个自动完成项目时,我会收到以下错误:-

TypeError: ui.item 未定义

【问题讨论】:

    标签: javascript jquery json razor autocomplete


    【解决方案1】:

    请添加“选择”事件并在下方尝试

     $( "input[data-autocomplete-source]" ).autocomplete({
           select: function( event, ui ) {
             $( "input[data-autocomplete-source]" ).val( ui.item.yourValueProperties);
             return false;
          }
      });
    
    ***Note : yourValueProperties= like customername *** 
    

    【讨论】:

    • 这将在 firebug 上引发以下异常:TypeError: ui.item is undefined [Break On This Error] $("input[data-autocomplete-source]").val(ui.item.标签);
    • 你得到 ui.item == null 了吗??
    • 正如我提到的使用你的代码,我会得到 TypeError: ui.item is undefined [Break On This Error] $("input[data-autocomplete-source]").val(ui. item.label);
    • 好的,John,我可以看到你的测试代码,因为数据会动态变化 (MVC)。请检查此链接,您可能会得到解决方案jqueryui.com/autocomplete/#custom-data
    • 请添加事件焦点:function(event, ui) { $( "input[data-autocomplete-source]" ).val( ui.item.label );返回假; },然后尝试一下
    猜你喜欢
    • 2011-09-05
    • 2013-10-15
    • 2013-10-27
    • 2015-07-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多