-1

我正在复制一个 wordpress 网站。创建此站点的人没有正确使用 wordpress(他只是将一堆 html 代码放入文本编辑器中,而不是从头开始创建站点)。除搜索功能外,所有内容都完美地复制到新网站上。我似乎无法让它发挥作用。有人对我如何复制它有任何建议吗?

基本上,当用户开始在搜索框(绿色矩形)中输入时,至少输入三个字母后,结果开始显示在表单下方,随着用户输入更多字母进行过滤。我可以阻止表单的默认操作,这样用户就不会按 Enter 来提交表单。如果没有插件可以做到这一点,也许有一种 php/javascript 方式我可以:

每次在搜索字段中输入一个字符时调用 php 或 javascript/jquery 中的函数:
   - 搜索 wordpress 帖子字符串的自定义帖子类型类别,并返回包含该字符串的所有标题。我可以使用帖子的标题,或者因为我使用的是高级自定义字段,所以我可以按名称字段进行搜索。
   -- 在表单下显示该信息

我要复制的页面在这里: http: //www.jessicadesmond.com/sr/our-team/

编辑

    function getElementByClass (className, parent) {
  parent || (parent = document);
  var descendants= parent.getElementsByTagName('*'), i=-1, e, result=[];
  while (e=descendants[++i]) {
    ((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
  }
  return result;
}


function gid(a_id) {
    return document.getElementById (a_id)   ;
}

function close_all(){// hide all divs
    var searchers = getElementByClass("search-title", "");

    for (i=0;i<searchers.length; i++) {// to simplify the story I have here the hardcoded number of elements. In real life make it better.
        var o = gid("user_"+i);
        if (o) { //just to make sure this object really exists
            o.style.display = "none";
        }
    }
}


function find_my_div(){ // find and show
    close_all(); // close previous searhc results
    var o_edit = gid("edit_search");
    var str_needle = edit_search.value;
    str_needle = str_needle.toUpperCase();

    var searchers = getElementByClass("search-title", "");

    if (str_needle != "") {// we will not search for empty strings
        for (i=0;i<searchers.length; i++) {
        var o = gid("user_"+i);
        var s = gid("title_"+i);
        if (s) { //just to make sure this object really exists
            // we want case insensitive search, so bring the both parts to upper case and compare
            var str_haystack = s.innerHTML.toUpperCase();
            if (str_haystack.indexOf(str_needle) ==-1) {
                // not found, do nothing
            }
            else{
                // yes, we got it, show it
                o.style.display = "block";
            }   
        }
    }
}
}

以及显示内容的 HTML/PHP:

<div id="team-search">
    <p>Search for a professional by name, title, or practice</p>
    <form class="team-search" role="search" method="get" id="searchform" action="#">
        <input name="search" id="edit_search" type="text" class="edit_search" onchange="find_my_div()">
        <input type="submit" id="searchsubmit" value="search" class="searchbutton"/>
    </form>
</div>
<?php 
    $args = array(
        'post_type' => 'team',
        'taxonomy' => 'employee-type',
        'term' => 'attorneys',
        'posts_per_page' => -1
    );
    $att_query = new WP_Query($args);
    if( $att_query->have_posts() ) { 
        $i = 0 ?>
        <div id="listTeam">
            <?
            while ($att_query->have_posts()) : $att_query->the_post(); 
                ?>
                <div style="display: none;" class="entryTeam" id="user_<?php echo $i; ?>">
                    <div class="teamTitle">
                        <a href="<?php the_permalink(); ?>">
                            <img src="<?php echo the_field('photo'); ?>" style="visibility: visible; opacity: 1;">
                        </a>
                        <p class="search-title" id="title_<?php echo $i; ?>"><?php the_title(); ?></p>
                        <p><em><?php echo the_field('tagline'); ?></em></p>
                    </div>
                </div>
            <?php 
                $i++;
                endwhile; 
            ?>
        </div>
    <?php }
    wp_reset_query();
4

1 回答 1

3

如果您注意到,在该站点上,当您输入时,他们不会对服务器执行动态请求 (AJAX)。(您可以使用 Chrome 的开发工具监控网络流量)。他们只是根据输入对数据进行排序。

让我们看看他们的源代码。
搜索“entryTeam”,您将看到所有元素的结构——所有这些人。你看他们都有style="display: none;"

这是他们的搜索功能

function listFilter(headerTeam, list) {
var form = $("<form>").attr({"class":"filterformTeam","action":"#"}),
    input = $("<input>").attr({"id":"filterinputTeam","class":"filterinputTeam","type":"text"});
jQuery(form).append(input).appendTo(headerTeam);

jQuery(input)
  .change( function () {
    var filter = $(this).val();
    if(filter) {
      $(list).find(".teamTitle:not(:Contains(" + filter + "))").parent().slideUp();
      $(list).find(".teamTitle:Contains(" + filter + ")").parent().slideDown();
    } else {
      $(list).find(".entryTeam").hide();
    }
    return false;
  })
.keyup( function () {

     if(this.value.length > 2){  
     $(".allTeam").hide();
     $('#allTeam').css('z-index', -999);
     $(this).change();
    }else{
   $(list).find(".entryTeam").hide();
   $(".allTeam").show();
   $('#allTeam').css('z-index', 999);
    }
});
}

所以,只需复制它:)


现在,这是我的一段代码,没有 jQuery,工作正常,享受:

<div id="user_0" style="padding:10px; display:none;" >Alex<br>CEO</div>
<div id="user_1" style="padding:10px; display:none;" >Ben<br>CTO</div>
<div id="user_2" style="padding:10px; display:none;" >Collin<br>VP R&D</div>
<div id="user_3" style="padding:10px; display:none;" >Daniel<br>Office manager</div>
<div id="user_4" style="padding:10px; display:none;" >Edward<br>Butcher</div>
<div id="user_5" style="padding:10px; display:none;" >Gerrald<br>Baker</div>
<div id="user_6" style="padding:10px; display:none;" >Henry<br>Candle stick maker</div>

<br>
    <input type="text" id= "edit_search">
    <input type="button" onClick="javascript: find_my_div();" value="Find">
    <input type="button" onClick="javascript: close_all();" value="Hide">


<script>

function gid(a_id) {
    return document.getElementById (a_id)   ;
}

  function close_all(){// hide all divs

    for (i=0;i<7; i++) {// to simplify the story I have here the hardcoded number of elements. In real life make it better.
        var o = gid("user_"+i);
        if (o) { //just to make sure this object really exists
            o.style.display = "none";
        }
}

  }


  function find_my_div(){ // find and show
    close_all(); // close previous searhc results

    var o_edit = gid("edit_search");
    var str_needle = edit_search.value;
    str_needle = str_needle.toUpperCase();

    if (str_needle != "") {// we will not search for empty strings
        for (i=0;i<7; i++) {
        var o = gid("user_"+i);
        if (o) { //just to make sure this object really exists
            // we want case insensitive search, so bring the both parts to upper case and compare
            var str_haystack = o.innerHTML.toUpperCase();
            if (str_haystack.indexOf(str_needle) ==-1) {
                // not found, do nothing
            }
            else{
                // yes, we got it, show it
                o.style.display = "block";
                }   
            }
        }
    }

  }
</script>

在这里测试它:http: //btlr.com/code/js_search.html

于 2013-09-26T22:05:00.327 回答