Question

当我使用以下代码时，我继续收到以下错误。任何帮助表示赞赏。我已经坚持了很长一段时间。

tipuedrop.js：60未捕获的TypeError：无法读取属性＆＃39;搜索＆＃39;未定义的

function getTipuedrop($obj) {
    if ($obj.val()) {
        var c = 0;
        for (var i = 0; i < tipuedrop_in.pages.length; i++) {
            var pat = new RegExp($obj.val(), 'i');
            if ((tipuedrop_in.pages[i].name.search(pat) != -1 || tipuedrop_in.pages[i].description.search(pat) != -1) && c < set.show) {
                if (c == 0) {
                    var out = '<div class="tipue_drop_box"><div id="tipue_drop_wrapper">';
                }
                out += '<a href="' + tipuedrop_in.pages[i].name + '"';
                if (set.newWindow) {
                    out += ' target="_blank"';
                }
                out += '><div class="tipue_drop_item"><div class="tipue_drop_left"><img src="' + tipuedrop_in.pages[i].name + '" class="tipue_drop_image"></div><div class="tipue_drop_right">' + tipuedrop_in.pages[i].name + '</div></div></a>';
                c++;
            }
        }
        if (c != 0) {
            out += '</div></div>';
            $('#tipue_drop_content').html(out);
            $('#tipue_drop_content').fadeIn(set.speed);
        }
    } else {
        $('#tipue_drop_content').fadeOut(set.speed);
    }
}

这是整个Javascript：

(function($) {

 $.fn.tipuedrop = function(options) {

      var set = $.extend( {

           'show'                   : 3,
           'speed'                  : 300,
           'newWindow'              : false,
           'mode'                   : 'static',
           'contentLocation'        : 'tipuedrop/tipuedrop_content.json'

      }, options);

      return this.each(function() {

           var tipuedrop_in = {
                pages: []
           };
           $.ajaxSetup({
                async: false
           });

           if (set.mode == 'json')
           {
                $.getJSON(set.contentLocation)
                     .done(function(json)
                     {
                          tipuedrop_in = $.extend({}, json);
                     });
           }               

           if (set.mode == 'static')
           {
                tipuedrop_in = $.extend({}, tipuedrop);
           }

           $(this).keyup(function(event)
           {
                getTipuedrop($(this));
           });               

           function getTipuedrop($obj)
           {
                if ($obj.val())
                {
                     var c = 0;
                     for (var i = 0; i < tipuedrop_in.pages.length; i++)
                     {
                          var pat = new RegExp($obj.val(), 'i');
                          if ((tipuedrop_in.pages[i].name.search(pat) != -1 || tipuedrop_in.pages[i].description.search(pat) != -1) && c < set.show)
                          {
                               if (c == 0)
                               {
                                    var out = '<div class="tipue_drop_box"><div id="tipue_drop_wrapper">';    
                               }
                               out += '<a href="' + tipuedrop_in.pages[i].name + '"';
                               if (set.newWindow)
                               {
                                    out += ' target="_blank"';
                               }
                               out += '><div class="tipue_drop_item"><div class="tipue_drop_left"><img src="' + tipuedrop_in.pages[i].master_image + '" class="tipue_drop_image"></div><div class="tipue_drop_right">' + tipuedrop_in.pages[i].name + '</div></div></a>';
                               c++;

                               console.log(tipuedrop_in.pages[i].name);
                               console.log(tipuedrop_in.pages[i].description);
                          }
                     }
                     if (c != 0)
                     {
                          out += '</div></div>';               
                          $('#tipue_drop_content').html(out);
                          $('#tipue_drop_content').fadeIn(set.speed);
                     }
                }
                else
                {
                     $('#tipue_drop_content').fadeOut(set.speed);
                }
           }

           $('html').click(function()
           {
                $('#tipue_drop_content').fadeOut(set.speed);
           });

      });
 };

})(jQuery);

Answer 1

使用名称和描述创建一些变量，然后对它们应用搜索

function getTipuedrop($obj) {
    if ($obj.val()) {
        var c = 0;
        for (var i = 0; i < tipuedrop_in.pages.length; i++) {
            var pat = new RegExp($obj.val(), 'i');
            var nm = String(tipuedrop_in.pages[i].name);
            var desc = String(tipuedrop_in.pages[i].description);
            if ((nm.search(pat) != -1 || desc.search(pat) != -1) && c < set.show) {
                if (c == 0) {
                    var out = '<div class="tipue_drop_box"><div id="tipue_drop_wrapper">';
                }
                out += '<a href="' + tipuedrop_in.pages[i].name + '"';
                if (set.newWindow) {
                    out += ' target="_blank"';
                }
                out += '><div class="tipue_drop_item"><div class="tipue_drop_left"><img src="' + tipuedrop_in.pages[i].name + '" class="tipue_drop_image"></div><div class="tipue_drop_right">' + tipuedrop_in.pages[i].name + '</div></div></a>';
                c++;
            }
        }
        if (c != 0) {
            out += '</div></div>';
            $('#tipue_drop_content').html(out);
            $('#tipue_drop_content').fadeIn(set.speed);
        }
    } else {
        $('#tipue_drop_content').fadeOut(set.speed);
    }
}

Answer 2

您的JSON数组包含一个没有name和description属性的元素。它是索引322处具有标识"dae04696-2acb-4972-a471-1b873e2a8d4f"的元素：

{
    "fees":[],"variations":[],
    "available_for_pickup":true,
    "available_online":false,
    "visibility":"PUBLIC",
    "id":"dae04696-2acb-4972-a471-1b873e2a8d4f",
    "type":"NORMAL"
}

因此，您的代码将在以下语句中引发错误，因为您尝试对未定义的name属性使用String方法（搜索）：

if ((tipuedrop_in.pages[i].name.search(pat) != -1 || ....

因此，在if中添加前缀以确保该属性存在，并对description执行相同操作。

if ((tipuedrop_in.pages[i].name 
             && tipuedrop_in.pages[i].name.search(pat) != -1 
       || tipuedrop_in.pages[i].description 
             && tipuedrop_in.pages[i].description.search(pat) != -1) 
   && c < set.show) {
       ...

请注意，显式转换为String（使用String(tipuedrop_in.pages[i].name)）也会删除错误条件，因为当name属性不存在时，它将呈现“undefined”（字符串）。

然而，这有副作用：

当您使用“未定义”的子字符串搜索时，如“精细”，您将获得与此未定义名称的匹配，这可能不是您想要的行为。

JSON和jQuery搜索

2 个答案: