页面上的jquery实时搜索结果为div手风琴，无法使其正常工作 [英] On-page jquery live search with results in div accordion, unable to get it working correctly
问题描述
您好我正在尝试进行页面jquery实时搜索，以div手风琴显示结果。我遇到的问题是当我的搜索在我的身体div中找到结果它隐藏了相应的标题时，所以我试图显示父母孩子的所有结果，但由于某种原因搜索不起作用好的。
非常感谢帮助。
这是我创建手风琴的部分和输入搜索：
< 表格 >
< 输入 type = text id = 搜索 >
< / form >
<？php
require_once（' admin / connect.php'）;
$ retval = mysql_query（ SELECT ID ，类别，主题，打开，关闭，正文，注意来自oc）;
if（！$ retval）
{
die（' 无法获取数据：' .mysql_error（））;
}
while（$ row = mysql_fetch_assoc（$ retval））
{
echo < div id ='wrapper'>< div id ='header'class ='header'> {$ row ['Subject ]}< / DIV>中。
< div id ='body'class ='body'> {$ row ['Body ]}< p>中。
{$ row ['Note']}< / div>< / div>< /跨度>;
}
？>
< script type = text / javascript < span class =code-attribute> src = jquery.quicksearch.js > < / script > < pre lang = Javascript > < script type = text / javascript >
$（ document ）。ready（ function （）
{
$（' div.header '）。点击（ function （）{
$（' div.body'）。slideUp（' normal'）;
$（ this ）。next（）。slideDown（' 正常'）;
}）;
// $（div.body）。hide（）;
// $（div.body）。first（）。show（）;
}）;
$（' input＃search'）。quicksearch（' div'，{
' < span class =code-string> show'： function （）{
$（这个）。addClass（' show'）;
}，
' hide'： function （ ）{
$（ this ）。removeClass（' show'）;
}}）;
< / script> 这是我正在使用的搜索脚本，来自：
（ function （$， window ， document ， undefined ）
{
$ .fn.quicksearch = function （target，opt）
{
var timeout，cache，rowcache，jq_results，val = ' '，e = 此，options = $ .extend（
{
延迟： 100 ，
选择器： null ，
stripeRows： null ，
loader： null ，
n oResults：' '，
matchedResultsCount： 0 ，
bind：' keyup'，
onBefore：< span class =code-keyword> function （）
{
return ;
}，
onAfter： function （）
{
return < /跨度>;
}，
显示：功能（）
{
this .parent( .wrapper）。children（ div.header）。style.display = ;
此 .parent（ 。wrapper ）。children（ div.body）。style.display = ;
}，
隐藏：功能（）
{
this .parent( .wrapper）。children（ div.header）。style.display = 无;
此 .parent（ 。wrapper ）。children（ div.body）。style.display = none;
}，
prepareQuery： function （val）
{
return val.toLowerCase（）。split（' '）;
}，
testQuery： function （query，txt，_row）
{
for （ var i = 0 ; i< query.length; i + = 1 ）
{
if （txt.indexOf（query [i ]）=== -1）
{
return false ;
}
}
返回 true ;
}
}，opt）;
此 .go = 功能（）
{
var i = 0 ，
numMatchedRows = 0 ，
noresults = true ，
query = options.prepareQuery（val），
val_empty =（val .replace（' '，' < span class =code-string>'）。length === 0 ）;
for （ var i = 0 ，len = rowcache.length; i< len; i ++）
{
if （val_empty || options。 testQuery（query，cache [i]，rowcache [i]））
{
options.show.apply（rowcache [i]）;
noresults = false ;
numMatchedRows ++;
}
else
{
options.hide.apply（rowcache [i]）;
}
}
if （noresults）
{
this .results（ false ）;
}
其他
{
此 .results （ true ）;
此 .stripe（）;
}
此 .matchedResultsCount = numMatchedRows;
此 .loader（ false ）;
options.onAfter（）;
返回 此;
}; / * *外部API，以便用户可以以编程方式执行搜索。 * * /
此 .search = 功能（submittedVal ）
{
val = submittedVal;
e.trigger（）;
}; / * *用于获取匹配结果数量的外部API，如* https://github.com/ruiz107/ quicksearch / commit / f78dc440b42d95ce9caed1d087174dd4359982d6 * * /
此 .currentMatchedResults = function （）
{
return 此 .matchedResultsCount;
};
此 .stripe = 功能（）
{
if （ typeof options.stripeRows === object&& options.stripeRows！== null ）
{
var joined = options.stripeRows.join（' '）;
var stripeRows_length = options.stripeRows.length;
jq_results.not（' ：hidden'）。each（ function （i）
{
$（ this ）。removeClass（joined）.addClass （options.stripeRows [i％stripeRows_length]）;
}）;
}
返回 此;
};
此 .strip_html = 功能（输入）
{
var output = input.replace（ new RegExp （' < [^<] + \>'，' g'）， ）;
output = $ .trim（output.toLowerCase（））; 返回输出;
};
此 .results = 功能（bool）
{
if （ typeof options.noResults === string&& options.noResults！== ）
{
if （bool）
{
$（ options.noResults）.hide（）;
}
else
{
$（options.noResults）.show（）;
}
}
返回 此;
};
此 .loader = 功能（bool）
{
if （ typeof options.loader === string&& options.loader！== ）
{
（bool）？ $（options.loader）.show（）：$（options.loader）.hide（）;
}
返回 此;
};
此 .cache = 功能（）
{
jq_results = $（target）;
if （ typeof options.noResults === string&& options.noResults！== ）
{
jq_results = jq_results.not（options.noResults）;
}
var t =（ typeof options.selector = == string）？ jq_results.find（options.selector）：$（target）.not（options.noResults）;
cache = t.map（ function （）
{
return e.strip_html（ this .innerHTML）;
}）;
rowcache = jq_results.map（ function （）
{
返回 此;
}）; / * *修改了同步val的修复程序。 *原始修复https://github.com/michaellwest/quicksearch/commit/4ace4008d079298a01f97f885ba8fa956a9703d1 * * /
val = val || this .val（）|| ;
返回 此 .go（）;
};
此 .trigger = 功能（）
{
此 .loader（ true ）;
options.onBefore（）;
window .clearTimeout（timeout）;
timeout = window .setTimeout（ function （）
{
e.go（）;
}，options.delay）;
返回 此;
};
this .cache（）;
此 .results（ true ）;
此 .stripe（）;
此 .loader（ false ）;
return 此 .each（ function （）
{ / * *从.bind更改为.on。* * /
$（ this ）。on（options.bind， function （）
{
val = $（ this ）。val（）;
e.trigger（）;
}）;
}）;
};
}（jQuery，此，文档））; https://github.com/riklomas/quicksearch#readme [ = mysql_query（ SELECT ID，Category，Subject，Open，Close，Body，Note FROM oc< /跨度>）; Hi I am trying to make an on-page jquery live search, that displays results in a div accordion. The problem I''ve been facing is when my search is finding results in my body div it hides th corresponding header, so I''m trying to show all the results parents children, but for some reason the search won''t work at all. And here is the search script I''m using, from : https://github.com/riklomas/quicksearch#readme[^] 这篇关于页面上的jquery实时搜索结果为div手风琴，无法使其正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
if（！
retval）
{
die（' 无法获取数据：' .mysql_error（））;
}
while（
row = mysql_fetch_assoc（
Help would be much appreciated.
Here is the part where I create the accordion and the input search:
<form>
<input type="text" id="search">
</form>
<?php
require_once('admin/connect.php');
$retval = mysql_query("SELECT ID, Category, Subject, Open, Close, Body, Note FROM oc");
if(!$retval)
{
die('Could not fetch data: ' . mysql_error());
}
while($row = mysql_fetch_assoc($retval))
{
echo "<div id='wrapper'><div id='header' class='header'>{$row['Subject']}</div>".
"<div id='body' class='body'>{$row['Body']}<p>".
"{$row['Note']}</div></div>";
}
?>
<script type="text/javascript" src="jquery.quicksearch.js"></script><pre lang="Javascript"><script type="text/javascript">
$(document).ready(function()
{
$('div.header').click(function() {
$('div.body').slideUp('normal');
$(this).next().slideDown('normal');
});
//$("div.body").hide();
//$("div.body").first().show();
});
$('input#search').quicksearch('div', {
'show': function () {
$(this).addClass('show');
},
'hide': function () {
$(this).removeClass('show');
}});
</script>
(function($, window, document, undefined)
{
$.fn.quicksearch = function (target, opt)
{
var timeout, cache, rowcache, jq_results, val = '', e = this, options = $.extend(
{
delay: 100,
selector: null,
stripeRows: null,
loader: null,
noResults: '',
matchedResultsCount: 0,
bind: 'keyup',
onBefore: function ()
{
return;
},
onAfter: function ()
{
return;
},
show: function ()
{
this.parent(".wrapper").children("div.header").style.display = "";
this.parent(".wrapper").children("div.body").style.display = "";
},
hide: function ()
{
this.parent(".wrapper").children("div.header").style.display = "none";
this.parent(".wrapper").children("div.body").style.display = "none";
},
prepareQuery: function (val)
{
return val.toLowerCase().split(' ');
},
testQuery: function (query, txt, _row)
{
for (var i = 0; i < query.length; i += 1)
{
if (txt.indexOf(query[i]) === -1)
{
return false;
}
}
return true;
}
}, opt);
this.go = function ()
{
var i = 0,
numMatchedRows = 0,
noresults = true,
query = options.prepareQuery(val),
val_empty = (val.replace(' ', '').length === 0);
for (var i = 0, len = rowcache.length; i < len; i++)
{
if (val_empty || options.testQuery(query, cache[i], rowcache[i]))
{
options.show.apply(rowcache[i]);
noresults = false;
numMatchedRows++;
}
else
{
options.hide.apply(rowcache[i]);
}
}
if (noresults)
{
this.results(false);
}
else
{
this.results(true);
this.stripe();
}
this.matchedResultsCount = numMatchedRows;
this.loader(false);
options.onAfter();
return this;
}; /* * External API so that users can perform search programatically. * */
this.search = function (submittedVal)
{
val = submittedVal;
e.trigger();
}; /* * External API to get the number of matched results as seen in * https://github.com/ruiz107/quicksearch/commit/f78dc440b42d95ce9caed1d087174dd4359982d6 * */
this.currentMatchedResults = function()
{
return this.matchedResultsCount;
};
this.stripe = function ()
{
if (typeof options.stripeRows === "object" && options.stripeRows !== null)
{
var joined = options.stripeRows.join(' ');
var stripeRows_length = options.stripeRows.length;
jq_results.not(':hidden').each(function (i)
{
$(this).removeClass(joined).addClass(options.stripeRows[i % stripeRows_length]);
});
}
return this;
};
this.strip_html = function (input)
{
var output = input.replace(new RegExp('<[^<]+\>', 'g'), "");
output = $.trim(output.toLowerCase()); return output;
};
this.results = function (bool)
{
if (typeof options.noResults === "string" && options.noResults !== "")
{
if (bool)
{
$(options.noResults).hide();
}
else
{
$(options.noResults).show();
}
}
return this;
};
this.loader = function (bool)
{
if (typeof options.loader === "string" && options.loader !== "")
{
(bool) ? $(options.loader).show() : $(options.loader).hide();
}
return this;
};
this.cache = function ()
{
jq_results = $(target);
if (typeof options.noResults === "string" && options.noResults !== "")
{
jq_results = jq_results.not(options.noResults);
}
var t = (typeof options.selector === "string") ? jq_results.find(options.selector) : $(target).not(options.noResults);
cache = t.map(function ()
{
return e.strip_html(this.innerHTML);
});
rowcache = jq_results.map(function ()
{
return this;
}); /* * Modified fix for sync-ing "val". * Original fix https://github.com/michaellwest/quicksearch/commit/4ace4008d079298a01f97f885ba8fa956a9703d1 * */
val = val || this.val() || "";
return this.go();
};
this.trigger = function ()
{
this.loader(true);
options.onBefore();
window.clearTimeout(timeout);
timeout = window.setTimeout(function ()
{
e.go();
}, options.delay);
return this;
};
this.cache();
this.results(true);
this.stripe();
this.loader(false);
return this.each(function ()
{ /* * Changed from .bind to .on. * */
$(this).on(options.bind, function ()
{
val = $(this).val();
e.trigger();
});
});
};
}(jQuery, this, document));
retval
= mysql_query("SELECT ID, Category, Subject, Open, Close, Body, Note FROM oc");
if(!retval)
{
die('Could not fetch data: ' . mysql_error());
}
while(
row = mysql_fetch_assoc(
