Searching

For searching, we first created a Search component with ReactJS.

When the user enters text into this box and presses "Enter" or clicks on "Search," the frontend parses the search terms and adds apostrophes where needed.

For instance, if the user searches for "torchys tacos," "tochy's" will also be a search term.

Then, the API will receive these terms and filter on zip codes that exactly match a search term or instance names that contain the search term. It will then return a list of matching results.

At this point, the Search component parses these results and groups them by category (restaurant, attraction, or hotel) and creates three lists to reflect this organization.

We then feed in the terms we searched for into each RestaurantSearchCard, HotelSearchCard, etc., and the card will highlight the matching terms appropriately.

We did not use any plugins for the highlighting. Instead, we wrote an intricate algorithm that converts the text in the search results to bitmaps, then inserts a <span> with a yellow background color where ever a substring matches a search term.