我正在创建一个基于 XML 文件的自动完成搜索。我想当用户输入一个单词时,文本会很突出。
到目前为止我做了什么:
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$.ajax({
url: "ecole.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = $( "school", xmlResponse ).map(function() {
return {
value: $( "name", this ).text() + ", " +
( $.trim( $( "adress", this ).text() ) + ", " + $( "description", this ).text() || "(unknown article)" ),
id: $( "id", this ).text(),
text: $( "description", this ).text()
};
}).get();
$( "#birds" ).autocomplete({
source: data,
minLength: 0,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + ", Id: " + ui.item.id + ", Text: " + ui.item.text :
"Nothing selected, input was " + this.value );
},
});
}
});
});
我真的不明白如何突出显示文本。我使用这段代码:
$(function() {
highlight: function(match, keywords) {
keywords = keywords.split(' ').join('|');
return match.replace(new RegExp("("+keywords+")", "gi"),'<b>$1</b>');
}
});
但我现在真的不知道为什么而且它不起作用
这是我的 HTML / PHP :
<div id="RecentEdition">
<?php
$schools = simplexml_load_file('ecoles.xml');
foreach ($schools->RecentEdition as $RecentEdition):
foreach ($RecentEdition->school as $school): ?>
<figure>
<img src='<?php echo "{$school->image} \n"; ?>' title='' />
<figcaption>
<h3>Contents</h3>
<p class="over">
<ul>
<?php foreach ($school->content as $content): ?>
<?php foreach ($content->chap as $chap): ?>
<li><a href="<?php echo "{$chap['link']} \n"; ?>"><?php echo "{$chap} \n"; ?></a></li>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
</p>
<p class="go">
<a href="<?php echo "{$school->link} \n"; ?>">View »</a>
</p>
</figcaption>
</figure>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
这是我的 XML:
<?xml version="1.0" encoding="utf-8"?>
<schools>
<RecentEdition>
<school>
<name>École1</name>
<id>1</id>
<link>./Marlburian0809/index.html</link>
<image>./img/zine.jpg</image>
<content>
<chap link="./Marlburian0708/#/2/">The Master's Speech</chap>
<chap link="./Marlburian0809/#/8/">College Community</chap>
<chap link="./Marlburian0809/#/50/">Trips n Expeditions</chap>
<chap link="./Marlburian0809/#/64/">Creative Arts</chap>
<chap link="./Marlburian0809/#/92/">Sports</chap>
</content>
<description>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus porta turpis, id congue nisi dapibus nec. Maecenas pulvinar blandit turpis, sit amet viverra arcu convallis id. Donec varius blandit orci nec molestie. Cras auctor, metus eget volutpat hendrerit, massa nibh tempor nunc, volutpat ultrices nibh eros vestibulum nulla. Aenean libero risus, auctor sed blandit ut, tincidunt non est. Nullam bibendum nunc non tortor eleifend consectetur. Proin porttitor, diam ac varius semper, leo odio mattis erat, id luctus ligula libero eu mi. Proin et lacus ligula. Quisque non consequat mauris. Morbi dolor mi, dapibus a condimentum ac, luctus at elit. Praesent sit amet felis at magna sagittis pharetra et vitae neque.
</description>
</school>
</RecentEdition>
</schools>
还有一个问题。如果我的自动完成中有一个大文本,例如:
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Duis vulputate nibh urna。Aliquam in arcu vel diam malesuada malesuada。Ut volutpat hendrerit sollicitudin。Quisque 前庭 adipiscing rhoncus。Curabitur laoreet interdum tempus。Aliquam 坐在 amet urna quis dui rhoncus venenatis iaculis id arcu。Proin sit amet tincidunt est. Aenean ut Tellus lectus。前庭 ac enim orci。
我希望如果你写世界« Interdum tempus »,结果显示:« ...laoreet interdum tempus。Aliquam 坐... »
可能吗 ?
非常感谢您的帮助。