Searching my app for content

[tonybabb]

Good morning,

I'm building a smartphone app that is essentially a talking Spanish phrasebook using topics where the user can find related English/ Spanish phrases for each topic.

I would like to give my users the ability to search the app for English words/ phrases and display the English word/ phrase followed by up to 3 Spanish phrases. I think I could use the jQuery "contains" selector to select the English phrases, but I think I have two problems:
1) How would I also select up to three Spanish phrases that immediately follow it?
2) How would I copy the results (English/ Spanish phrases) to the search page?

Below is a section of code showing a couple of English phrases one followed by two Spanish phrases and the other followed by one Spanish phrase


<div class="english">
You are under arrest
</div> <!-- End English -->
<div class="wrapper">
<a class="formal spanish" data-ignore="true" href="arrUnderArrestF.mp3">F: Está bajo arresto</a>
<a class="informal spanish" data-ignore="true" href="arrUnderArrestI.mp3">I: Estás bajo arresto</a>
</div> <!-- End .wrapper -->
<div class="english">
I have an arrest warrant
</div> <!-- End English -->
<div class="wrapper">
<a class="spanish" data-ignore="true" href="arrArrestWarrant.mp3">Tengo una orden de arresto</a>
</div> <!-- End .wrapper -->

Thanks in advance for any suggestions.

Tony

[tonybabb]

I've been trying to get this to work for several days without success, I'm probably missing something very obvious.

Basically I see 3 problems - so far!
1) I'm not able to replace a hard coded search term with a variable in a jQuery statement
2) When the hard coded search runs it returns the correct phrase but also includes a comment from the original html
3) It only returns one search result when it should be returning several

For testing I have been entering "arrest" in the search box.Here's what I've got so far:
Below is a section of the html content it is searching


<div class="english"> <!-- Start English -->
You are under arrest
</div> <!-- End English -->
<div class="wrapper">
<a class="formal spanish" data-ignore="true" href="arrUnderArrestF.mp3">F: Está bajo arresto</a>
<a class="informal spanish" data-ignore="true" href="arrUnderArrestI.mp3">I: Estás bajo arresto</a>
</div> <!-- End .wrapper -->
<div class="english"> <!-- Start English -->
I have an arrest warrant
</div> <!-- End English -->
<div class="wrapper">
<a class="spanish" data-ignore="true" href="arrArrestWarrant.mp3">Tengo una orden de arresto</a>
</div> <!-- End .wrapper -->

I have a Search page where the user enters their search term and the results of the search should be displayed, here's the code for the page


<div class="english">
Search for words in English
</div>
<div class="spacer"></div>
<input name="searchTxt" type="text" maxlength="32" id="searchTxt" class="searchField"/>
<button onclick="searchApp()"> Search </button>
<div class="spacer"></div>
<div id="searchResultsDiv">
<p id="searchResultsP">Search results go here</p>
</div> <!-- /searchResultsDiv -->


and here's the js with some comments added

function searchApp() {
var $searchTerm = "";
$searchTerm = document.getElementById("searchTxt").value;
alert ("$searchTerm is " + $searchTerm); // this displays the search term entered by the user and is working correctly
alert("search 1 results " + $( ".english:contains($searchTerm)" ).html()); // this does not work, returns 'undefined'
alert("search 2 results hard coded " + $( ".english:contains('arrest')" ).html()); // this works correctly - I just hard coded a search term
var $searchResultsAlert = $( ".english:contains('arrest')" ).html();
alert ("search 3 results hard coded are " + $searchResultsAlert); // this works correctly
// The next line should overwrite the paragraph on the search page with the search results
document.getElementById("searchResultsP").innerHTML = $( ".english:contains('arrest')" ).value; // This does not work it returns 'undefined' in the paragraph

} // /searchApp

Thanks for any input you may have.

Tony