我们使用list.js根据输入中输入的内容对目录进行实时过滤.还有两个选择字段允许基于分类法进行过滤.这些工作正常.

实时过滤功能适用于Chrome,Firefox,Safari,IE和Android.我不确定下一步要进行调试,因为我们已经完成以下操作无济于事：

>选中以确保没有大写/小写的文件名和/或路径可以绊倒iOS.
>在ajax代码中添加了一个console.log,以确保它在iOS上启动(它是由Web Inspector通过Safari验证).
>通过Web Inspector检查错误或警告(没有错误,没有警告,没有).

这是我们的main.js文件中的代码：

var listingsArray;

    $.ajax({
        url: PHP_ajax_url,type: "POST",data: "action=sackville_directory_Feed",async: false,success: function(results) {
            var listings = JSON.parse(results);
            listingsArray = $.map(listings,function(el) { 
              return el; 
            });
        },error: function() {
            console.log('Cannot retrieve data.');
        }
    });

    var directory = {};
    var directoryListings = $('.list');

    directory.renderHTML = function(z,listing){
      directoryListings.append('<div class="card card-directory col-lg-3 col-md-4 col-sm-6"><div class="directory-image" style="background-image: url(' + listing.image + ')"></div><h3 class="name">' + listing.name + '</h3><p class="description">' + listing.description + '</p><span>' + ( listing.address !== '' ? listing.address + ',' : '') + ( listing.city_province !== '' ? listing.city_province : '') + ( listing.postal !== '' ? ',' + listing.postal : '' ) + '</span><span>' + listing.phone + (listing.website !== '' ? ' | <a href="' + listing.website +  '">Visit Website</a>' : '') + '</span></div>');
    };

    directory.init = function(){
      directoryListings.empty();
      $.each(listingsArray,function(i,listing){
        directory.renderHTML(i,listing);
      });
    }; 

    $('.directory-filters').on('change',function(){
      var option = $(this).val();
      var label = $(this).find('option:selected').text();
      directoryListings.empty();

      if(option === 'all'){
        directory.init();
      }

      $.each(listingsArray,listing){
        if(listing.hasOwnProperty('category') && listing.category.indexOf(option) >= 0){ /* If category filter is contained within listing data */
          directory.renderHTML(i,listing);
        } else if(listing.hasOwnProperty('theme') && listing.theme.indexOf(option) >= 0){ /* If theme filter is contained within listing data */
          directory.renderHTML(i,listing);
        }
      });

      $('#current-results').html(label);
    });

    /* Get it started */
    directory.init();

    /* List JS live search */
    directory.options = {
      valueNames: [ 'name','description','category' ]
    };

    directory.directoryList = new List('directory',directory.options);

  }

这是一个使用Sage starter theme的wordpress站点,上面的PHP_ajax_url位引用了functions.PHP中的以下内容：

function assets() {
    wp_enqueue_style('sage/css',Assets\asset_path('styles/main.css'),false,null);

    $ajax_url = admin_url( 'admin-ajax.PHP' );

    wp_enqueue_script('sage/js',Assets\asset_path('scripts/main.js'),['jquery'],null,true);
    wp_localize_script( 'sage/js','PHP_ajax_url',$ajax_url );
    }
    add_action('wp_enqueue_scripts',__NAMESPACE__ . '\\assets',100);

我是Ajax的新手,并且会喜欢关于下一步的指导.或者,你看到任何明显错误的东西吗？