Highlight on a autocomplete with XML - jquery-ui

Question

I am creating a search with autocomplete based on a XML file.
I would like when the user enter a word, the text will be hightligh.
What I have done so far :
$(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 );
},
});
}
});
});
I don't really understand how to do to highlight the text.
I use this code :
$(function() {
highlight: function(match, keywords) {
keywords = keywords.split(' ').join('|');
return match.replace(new RegExp("("+keywords+")", "gi"),'<b>$1</b>');
}
});
But I don't really now why and it doesn't work
Here's my 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><?php echo "{$chap} \n"; ?></li>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
</p>
<p class="go">
View »
</p>
</figcaption>
</figure>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
And here's my 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>
And an another question.
If I have a big text in my autocomplete e.g :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
vulputate nibh urna. Aliquam in arcu vel diam malesuada malesuada. Ut
volutpat hendrerit sollicitudin. Quisque vestibulum adipiscing
rhoncus. Curabitur laoreet interdum tempus. Aliquam sit amet urna quis
dui rhoncus venenatis iaculis id arcu. Proin sit amet tincidunt est.
Aenean ut tellus lectus. Vestibulum ac enim orci.
I would like that if you write the world « Interdum tempus », the result display :
« …laoreet interdum tempus. Aliquam sit… »
Is it possible ?
Many thanks for you help.

Answer 1

You might be confusing AutoComplete and Search Term Highlighting. Do you want to:
Slowly reveal possible text choices as the user types more letters (i.e. Google Suggestions)
-OR-
Highlight the already searched for term in a search results page
Or maybe you want to do both, but it looks like you're talking about Highlighting from the sample code, although your question is about AutoComplete...
Anyway here's some code for Autocomplete of the description and Search Term highlighting:
<?php
$q = filter_var($_REQUEST['q'], FILTER_SANITIZE_STRING);
$query = (isset($q) && !empty($q)) ? $q : "";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Autocomplete/SearchHighlighting Example</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<style type="text/css">
span.highlighted {
background-color: #FFF6C6;
font-weight: bold;
}
span.term0 {
color: #161633;
}
span.term1 {
color: #331616;
}
span.term2 {
color: #163316;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption, audio, video, canvas { display:block; }
</style>
</head>
<body>
<form id="search" name="search">
<label for="q">Search: </label><input type="text" id="q" name="q" value="<?php echo $query; ?>" placeholder="Enter a search term" />
</form>
<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 id="results">
<?php foreach ($school->content as $content): ?>
<?php foreach ($content->chap as $chap): ?>
<li><?php echo "{$chap} \n"; ?></li>
<?php endforeach; ?>
<?php endforeach; ?>
</ul>
</p>
<p class="desc"><?php echo "{$school->description} \n"; ?></p>
<p class="go">
View »
</p>
</figcaption>
</figure>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
<script type="text/javascript">
$(function() {
//Autocomplete
$("#q").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
$.getJSON('search.php?callback=?', req, function(data) {
var suggestions = []; //create array for response objects
//process response
$.each(data, function(i, terms){
suggestions.push(terms.term);
});
add(suggestions); //pass array to callback
});
},
//define select handler: Search Term Highlighting function
select: function(match, keywords) {
var rawSearchString = $('#q').val().replace(/[a-zA-Z0-9\?\&\=\%\#]+s\=(\w+)(\&.*)?/,"$1"); // Return sanitized search string if it exists (term should be FIRST URL PARAMETER)
var searchString = rawSearchString.replace(/ /g,"\|").replace("?term=",""); // Replace '+' and '%20' with '|' for regex
var searchTerms = searchString.split('|'); // Split search terms on '|' and iterate over resulting array
for (var j in searchTerms) {
var regex = new RegExp(">([^<]*)?("+searchTerms[j]+")([^>]*)?<", "ig"); // this regex is the secret, it prevents text within tag declarations from being affected
var tempHTML = $('#RecentEdition').html(); // Do regex replace
$('#RecentEdition').html(tempHTML.replace(regex, '>$1<span class="highlighted term'+j+'">$2</span>$3<')); // Inject span with class of 'highlighted termX' for term highlighting
}
}
});
});
</script>
</body>
</html>
And the PHP search file (call it "search.php") using xPath:
<?php
header('content-type: application/json; charset=utf-8');
$term = urldecode($_REQUEST['term']);
$callback = $_GET["callback"];
$html = new DOMDocument();
#$html->load("ecoles.xml");
$xpath = new DOMXPath($html);
$query = "//schools/RecentEdition/school/description[contains(.,'".$term."')]";
$nodelist = $xpath->query($query);
$i = 0;
foreach ($nodelist as $n) {
$result = trim($n->nodeValue);
$resultArray[$i] = array( "term" => str_replace('"',"'",substr($result,strpos($result,$term),25)) );
$i++;
}
$resultJSON = json_encode($resultArray);
echo $callback."(".$resultJSON.")";
?>
DEMO here:
http://bcmoney-mobiletv.com/widgets/autocomplete/