20170624

search-page.php

<?php
/*
   Template Name: インクリメンタルサーチページ
 */
?>

<?php get_header(); ?>

<h1>インクリメンタルサーチ</h1>

<input type="text" id="js-search">

<ul id="js-list">
</ul>

<script>
jQuery('#js-search').on('keyup', function (e) {
  var $list = jQuery('#js-list');
  var text = jQuery(this).val();
  if (text === '') {
    $list.empty();
    return;
  }
  jQuery.ajax({
  url:'/wp-json/wp/v2/posts?_embed&search='+text,
    type:'get'
  })
  .done(function(data){
    console.log(data);//データのリスト
    $list.empty();
    data.forEach(function(item){
      $list.append('<li><a href="+item.title.link+">'+item.title.rendered+'</a></li>')
    })
  })
  .fail(function(data){
    console.log(data);
  });
})
</script>
<?php get_footer(); ?>