Question

我的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未定义

Answer 1

请添加＆＃34;选择＆＃34;事件并尝试以下

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

***Note : yourValueProperties= like customername ***

选择自动完成项目无效

1 个答案: