javascript - JSON 和 jQuery 实时搜索

Question

我在为在线商店构建基于 jQuery/JSON 的实时搜索时，一直被这个问题困扰了好几天。使用 Tipue Drop开源 我可以在使用他们的测试 JSON 时获得结果，但似乎无法读取我的结果。我有一个 JSON 文件 here并使用下面的 javascript 尝试使用 Tipue Drop 读取名称和描述字段。任何关于我如何解决这个问题的建议都将不胜感激!

/*
Tipue drop 5.0.2
Copyright (c) 2015 Tipue
Tipue drop is released under the MIT License
http://www.tipue.com/drop
*/


(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].id + '"';
                                   if (set.newWindow)
                                   {
                                        out += ' target="_blank"';
                                   }
                                   out += '><div class="tipue_drop_item"><div class="tipue_drop_left"><img src="' + tipuedrop_in.pages[i].id + '" 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);
                    }
               }
               
               $('html').click(function()
               {
                    $('#tipue_drop_content').fadeOut(set.speed);
               });
          
          });
     };
     
})(jQuery);

<script>
  $(document).ready(function() {
       $('#tipue_drop_input').tipuedrop({
            'mode': 'json',
            'contentLocation': 'http://barbarostudios.com/clientpreviews/lungavita2/api/search.php'
       });
  });
</script>

Answer 1

这对我来说仍然看起来像 JavaScript 错误，因为您的某些项目未定义索引。其中一个没有名字 (dae04696-2acb-4972-a471-1b873e2a8d4f) 并且一大堆没有描述:

159e522f-10fd-4577-ad3b-866da83d0054
19b63864-9566-4264-9510-821c9d020f74
2417fcae-7ce2-4539-a334-c88e0a81b8a9
26a014ac-b23b-4bc2-9b19-b754e875b5f1
2a9f8d42-0dbc-470a-a59b-4cf1aff0a0ed
38c389e2-6926-425d-baa0-0760d63926c1
3dc823a7-9bac-4290-9aae-757480ffe5c1
3e2fbcec-e35d-4f75-94c3-e4de71f4b428
4aba2175-e1cc-4e12-9135-9cec3e4f8914
54b8cba1-3c4b-4bf5-bf6c-b7bd1cfb25b4
5b2867c1-d077-4deb-9d8e-890d3afd5163
5b2d8d5a-1d94-499c-9205-40888472a3f3
5b7dd41a-59cd-49d1-a06f-a9b2a90e516d
5bf00622-33e1-4bed-a00b-0f14826cd2b7
6164bb51-0d0e-4eb1-81bb-cef64bca56cb
6376edc3-faba-4018-8bc2-8b3e0d9fcb48
6d618850-dca0-495f-92ed-f8b86578b063
740b265a-fd38-4bcf-8e68-ab14e8266543
79728b83-6365-4a00-8634-10656081a574
7b093823-599e-481c-8cbe-f1cfab3674e6
7ec54482-4e6e-470b-ac19-6b9cee2b7db3
9552f568-b7bd-44f2-b144-f3773ae0d097
9860c5a8-2a04-4176-95bc-762895a077e3
9a418680-cb24-4f2c-a56f-cb555edd9db4
9cad6135-3d87-4fda-988d-9ec3f7958f31
a676471c-8633-4bd4-a801-3066d59c2c00
ac20c6f3-0627-4b7b-85cb-7960c0935d3c
b09a2984-a868-47e4-84de-177572fd2b16
bc7b3be8-c388-4e1a-a884-8a899ff13889
bcff6f69-eb86-468d-be40-90e21f477f56
beddc257-4490-41e4-ba1d-088f2bd75108
c035feaa-23ae-4e60-948d-8e8fd9b6d314
c5f2083a-c5b0-4c98-934c-f7f006230285
d4ddcb79-3e0e-4958-a2de-260c05d0596c
d5447be8-8b92-473e-9df0-7d0e1a0b6ed1
d7e25d21-3e8a-4ddc-832b-e5a7939b1e75
dae04696-2acb-4972-a471-1b873e2a8d4f
e08cb73e-1060-4a28-abe0-2beba19f8407
fb464d67-7406-48d7-98d9-2c094f219079

这会导致 tipuedrop 在遍历页面时失败，并停止处理脚本的其余部分(因为您专门查看名称和描述属性)。

如果您的 PHP 页面从 JSON 文件中提取 JSON，您可以使用它来静态修改 JSON 文件以修复它:

<?php
    $json = json_decode(file_get_contents('json.json'));
    foreach($json->pages as &$page){
        if(!isset($page->description)){
            $page->description = "";
        }
        if(!isset($page->name)){
            $page->name = "";
        }
    }
    file_put_contents('json.json', json_encode($json));
?>

或者，如果您的 PHP 页面从其他地方提取信息(txt 文件或数据库或其他东西)，您可以将其更改为动态地为每个没有该设置的元素添加描述和名称(这是几乎相同的代码，只是修改了一点)，并回显动态更改的代码。