Added Search Term highlighting and Clear Search Box

This commit is contained in:
Robbie Antenesse 2015-10-30 16:45:29 -06:00
parent c08cf616dd
commit c60456e113
3 changed files with 20 additions and 4 deletions

View File

@ -178,6 +178,16 @@ longDefinition p {
margin: 3px 0 8px;
}
searchTerm {
display: inline;
color: #ff0000;
background: #ffff00;
padding: 1px;
text-decoration: underline;
font-style: italic;
font-weight: bold;
}
.management {
display: block;
right: 5px;

View File

@ -65,7 +65,10 @@
<div id="searchArea" style="display:block;">
<label style="margin-top:10px;">
<span>Search</span>
<input type="text" id="searchBox" onclick="this.select();" onchange="ShowDictionary()" style="display:block;" />
<div style="display:block;">
<input type="text" id="searchBox" onclick="this.select();" onchange="ShowDictionary()" style="display:inline;" />&nbsp;
<span style="display:inline;cursor:pointer;font-size:10px;font-weight:bold;" onclick="document.getElementById('searchBox').value='';ShowDictionary();">Clear Search</span>
</div>
<div id="searchOptions" style="font-size:12px;">
<label style="display:inline;margin:0;">Word <input type="checkbox" id="searchOptionWord" checked="checked" onchange="ShowDictionary()" /></label>&nbsp;&nbsp;
<label style="display:inline;margin:0;">Equivalent <input type="checkbox" id="searchOptionSimple" checked="checked" onchange="ShowDictionary()" /></label>&nbsp;&nbsp;

View File

@ -267,8 +267,11 @@ function ToggleDescription() {
function DictionaryEntry(itemIndex) {
var entryText = "<entry>";
var searchTerm = htmlEntities(document.getElementById("searchBox").value);
var searchRegEx = new RegExp(searchTerm, "g");
entryText += "<word>" + currentDictionary.words[itemIndex].name + "</word>";
entryText += "<word>" + ((searchTerm != "") ? currentDictionary.words[itemIndex].name.replace(searchRegEx, "<searchTerm>" + searchTerm + "</searchterm>") : currentDictionary.words[itemIndex].name) + "</word>";
if (currentDictionary.words[itemIndex].partOfSpeech != "") {
entryText += " <partofspeech>" + currentDictionary.words[itemIndex].partOfSpeech + "</partofspeech>";
@ -277,11 +280,11 @@ function DictionaryEntry(itemIndex) {
entryText += "<br>";
if (currentDictionary.words[itemIndex].simpleDefinition != "") {
entryText += "<simpledefinition>" + currentDictionary.words[itemIndex].simpleDefinition + "</simpledefinition>";
entryText += "<simpledefinition>" + ((searchTerm != "") ? currentDictionary.words[itemIndex].simpleDefinition.replace(searchRegEx, "<searchTerm>" + searchTerm + "</searchterm>") : currentDictionary.words[itemIndex].simpleDefinition) + "</simpledefinition>";
}
if (currentDictionary.words[itemIndex].longDefinition != "") {
entryText += "<longdefinition>" + markdown.toHTML(htmlEntitiesParse(currentDictionary.words[itemIndex].longDefinition)) + "</longdefinition>";
entryText += "<longdefinition>" + ((searchTerm != "") ? markdown.toHTML(htmlEntitiesParse(currentDictionary.words[itemIndex].longDefinition)).replace(searchRegEx, "<searchTerm>" + searchTerm + "</searchterm>") : markdown.toHTML(htmlEntitiesParse(currentDictionary.words[itemIndex].longDefinition))) + "</longdefinition>";
}
if (!currentDictionary.settings.isComplete) {