在wordpress站点上使用javascript键入时以div显示搜索结果

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

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

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

我试图复制的页面如下所示：

编辑

    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";
            }   
        }
    }
}
}

函数getElementByClass（类名，父类）{ 父项| |（父项=文档）； var后代=parent.getElementsByTagName（'*'），i=-1，e，result=[]； 而（e=子体[++i]）{ （“”+（e['class']| e.className）+'.indexOf（“”+className++'>）-1）和&result.push（e）； } 返回结果； } 函数gid（a_id）{ return document.getElementById（a_id）； } 函数close_all（）{//隐藏所有div var searchers=getElementByClass（“搜索标题”，“搜索标题”）； 对于（i=0；i

---

如果您注意到，在该站点上，您输入时，他们不会实现对服务器的动态请求（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);
    }
});
}

函数列表过滤器（headerTeam，列表）{
var form=$（“”）.attr（{“类”：“filtermeteam”，“操作”：“#”}），
input=$（“”）.attr（{“id”：“filterinputTeam”，“class”：“filterinputTeam”，“type”：“text”}）；
jQuery（form）.append（input）.appendTo（headerTeam）；
jQuery（输入）
.改变（功能）{
var filter=$（this.val（）；
如果（过滤器）{
$（列表）.find（“.teamTitle:not（：Contains（“+filter+”）））.parent（）.slideUp（）；
$（列表）.find（“.teamTitle:包含（“+filter+”））.parent（）.slideDown（）；
}否则{
$（list.find（“.entryTeam”）.hide（）；
}
返回false；
})
.keyup（函数（）{
如果（this.value.length>2）{
$（“.allTeam”）.hide（）；
$（'#allTeam'）.css（'z-index'，-999）；
$（this.change（）；
}否则{
$（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>

Alex
首席执行官
本
首席技术官
科林
研发副总裁
丹尼尔
办公室经理
爱德华
屠夫
Gerrald
贝克
亨利
蜡烛棒制造者


函数gid（a_id）{
return document.getElementById（a_id）；
}
函数close_all（）{//隐藏所有div
对于（i=0；i我应该复制html的哪一部分，这段代码生成了哪一部分？更具体地说，我自己是否将
display:none
放在页面中？因此，如果我将所有html和这段javascript放在页面中，理论上它会起作用？理论上，你可以在他们的代码中挖掘并找到你需要的内容，只是不要忘记包含ude jQuery并使用Chrome->dev工具检查他们的代码。但它更愿意自己做，会在20分钟内更新我的帖子，因为我想准备自己的代码。这很好。一个问题：当我按enter键时，这可以工作。有没有办法使用onchange让它工作，这样它就会显示为用户类型？我已经粘贴了modifi上面的ed代码。这实际上在你离开文本框时也会起作用。所以我想我只需要它发生在你离开或不离开文本框时。事实上，这在你点击按钮时起作用。你可能需要的是为编辑框添加一个onKeyUp事件。在这种情况下，每次键入新字符或删除时都会进行搜索它。只需将其添加到输入字段：我在这里更新了我的示例：
<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>