[英]Display search results in div while typing with javascript on wordpress site
我正在复制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();
如果您注意到,在您键入该网站时,它们将不会对服务器(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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.