我已经创建了自己的自定义元框。元框包含三个下拉菜单,用作过滤器和搜索框。还有一个显示帖子列表的结果面板。用户可以选择帖子并将其添加到另一个收集帖子的面板中。这类似于ACF关系字段及其工作方式。您在左侧有帖子,单击其中一篇,它就会添加到收集区域。按post上的submit将所有值保存到meta字段中。我有过滤器工作,我也有关系片工作。
出于某种原因,我实现搜索框的方式没有任何作用。我在一个HTML文件中对此进行了测试,结果很好。我可以在搜索框中键入,它将扫描无序列表数据文本属性中的项目,找到结果并过滤列表。
当我将这个函数添加到wordpress中时,我看到它捕获了onkeyup笔划,但它没有过滤结果框中的结果。
你知道为什么这个在wordpress管理中不起作用吗?我是否必须使用ajax来过滤这些结果?
下面是javascript。我把这个函数放在表单的后面。我在搜索字段的输入字段中调用onkeyup。
function dmtSearchFunction() {
// Declare variables
var filter, li, i, dataArray;
filter = jQuery(\'#dmt-filter-search\').val().toUpperCase();
li = jQuery("#dmt-choice-list li.choice-item");
console.log(\'filter: \' + filter);
console.log(\'li: \' + li);
console.log(\'li length: \' + li.length);
var dataArray = new Array();
for (i = 0; i < li.length; i++) {
var dataArray = jQuery(li[i]).data(\'text\');
if(dataArray.toUpperCase().indexOf(filter) > -1){
jQuery(li[i]).css(\'display\', \'block\');
} else {
jQuery(li[i]).css(\'display\', \'none\');
}
}
}
最合适的回答,由SO网友:Robbiegod 整理而成
通过进一步的实验,我现在能够让它工作,并对其进行改进。
最初,我遇到了一个问题,当我将此函数放入js文件时,它不会启动。只有将其添加到我的函数中,它才会起作用。表单下方的php文件。
我发现我需要使用jquery。on语句,现在当我开始在搜索字段中键入时,该函数被触发。我也喜欢这样,现在我可以在js文件中包含所有javascript。
以下是我最终得到的结果—它包装在一个jquery文档就绪函数中:
function dmtSearchFunction() {
console.log(\'cheers\');
// Declare variables
var filter, li, i, dataArray;
filter = jQuery(\'#dmt-filter-search\').val().toUpperCase();
li = jQuery("#dmt-choice-list li.choice-item");
console.log(\'filter: \' + filter);
console.log(\'li: \' + li);
console.log(\'li length: \' + li.length);
var dataArray = new Array();
for (i = 0; i < li.length; i++) {
var dataArray = jQuery(li[i]).data(\'text\');
if(dataArray.toUpperCase().indexOf(filter) > -1){
jQuery(li[i]).css(\'display\', \'block\');
} else {
jQuery(li[i]).css(\'display\', \'none\');
}
}
}
jQuery( ".filter-dmt-search" ).on( "keyup", "input", dmtSearchFunction );
正在工作!