Add user interface to search through a publication

[mickael-menu]

(Please respond in this issue if you want to contribute this feature and have any question)

The PR readium/r2-shared-swift#135 adds a new SearchService feature to search through the content of a publication. We need to expose this in the user interface of the test app.

Here are some general guidelines:

• SearchService is described in this proposal.
• The search interface needs to be added for the ReaderViewController if publication.isSearchable is true.
• It would be best to load the next page of results (iterator.next() when scrolling to the end of the results table view)

Starting a search

To start a new search, use publication.search(). It will asynchronously return a SearchIterator if the search is valid. This iterator can be used to get the search results.

let cancellable = publication.search(query: "banana") { result in
    switch result {
        case .success(let iterator):
            // show results using iterator
        case .failure(let error):
            // display error
    }
}

Showing the results

The results will be displayed in a table view. Every time the user scrolls to the end of the scroll view, you need to request the next page of results with iterator.next(). It will return a LocatorCollection, or nil if the search is finished.

let cancellable = iterator.next { result in
    switch result {
        case .success(let collection):
            if let collection = collection {
                // append `collection.locators` to the table view
            } else {
                // search is finished
            }
        case .failure(let error):
            // display error
    }
}

For each Locator cell:

• If locator.title is different from the previous locator.title, create a new section with this title in the table view
• Display the locator.locations.totalProgression in the cell
• Display the search snippet with locator.text.before + locator.text.highlight + locator.text.after, putting emphasis on the locator.text.highlight portion.

Cancelling the search

When the user cancels the search, you need to dispose of the search properly:

• If publication.search() didn't return an iterator yet, call cancel() on the Cancellable returned by publication.search().
• If a SearchIterator was received:
  • call cancel() on the Cancellable returned by the last iterator.next() call
  • call iterator.close()

[newit-toannv]

[newit-toannv]

The first time search, results always in same title, not full tableview

[mickael-menu]

Thanks @newit-toannv! Maybe you can open a pull request so we can discuss the implementation there?

[mickael-menu]

To get more results you need to call iterator.next() until the screen is filled or there are no more results.

[newit-toannv]

Hi there, Sure, I understand your idea, but I mean UX in this situation not good, Let me show you more detail: - Test book: Moby-Dick - Search “a” keyword => Results: 4 items with title: “Title”, - When I scroll table => iterator.next() to get more items => Add more result items title:”About” This behavior different with Android version. Regards. On 5 Jul 2021, at 19:07, Mickaël Menu ***@***.******@***.***>> wrote: To get more results you need to call iterator.next() until the screen is filled or there are no more results. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#164>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AUP576SJSAM7D35VJ6G5WDLTWGN75ANCNFSM45AQWJLA>.

[mickael-menu]

Yeah that's because the search API returns a flat list of Locator, there's no concept of hierarchy/tree for sections.

What you need to do is create a new section in the table view every time you have a different locator.title in the list. This way it will group the locator by their title in order.

[newit-toannv]

OK, thank, I got it, I Embed title and content in html and I use TextView to show it (UITextView inside UItableViewCell) On 6 Jul 2021, at 14:55, Mickaël Menu ***@***.******@***.***>> wrote: Yeah that's because the search API returns a flat list of Locator, there's no concept of hierarchy/tree for sections. What you need to do is create a new section in the table view every time you have a different locator.title in the list. This way it will group the locator by their title in order. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#164>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AUP576VEZBQF2U73ZIH62C3TWKZFTANCNFSM45AQWJLA>.

[mickael-menu]

I think the best way to represent that would be to use actual UITableView sections for this. Less work and it will look nicer in the UI.

[JacobDaneh]

Hi,
Thank you for implementing search service. search service has good performance.
How could i highlight text in the epub when user taps search result and navigating to the selected location?

SearchService.mov

[mickael-menu]

How could i highlight text in the epub when user taps search result and navigating to the selected location?

You can use the new Decorator API that is available in Readium Swift 2.1.

It should look something like that (I didn't check the exact syntax):

let searchLocator = ...
let searchIndex = ...

let decoration = Decoration(
    // The index in the search result list is a suitable Decoration ID, as long as
    // we clear the search decorations between two searches.
    id: searchIndex,
    locator: searchLocator,
    style: .underline()
)

navigator.apply(decorations: [decoration], in: "search")

[mickael-menu]

I gave more details in this discussion: https://github.com/readium/r2-testapp-swift/discussions/402