Transifex

  • Documentation
  • Transifex Live
  • Live Search (Beta)

Live Search (Beta)

Note

Localized Search with Transifex Live is only available on the Enterprise plan and up.

If you have search functionality on your site, Transifex Live Search lets you display localized search results even when the search term isn't in the source language of the website.

Requirements

For Live Search to work, you'll need the following on your site:

  • A search input. This can be done by querying the database or any other site-specific method.
  • A page that displays the search results. You may include the search term somewhere on the results page, but it's not a requirement.

How it works

Because Transifex Live runs on JavaScript, it's not connected to the database of your website where your content is stored. To make search work, here's what we do:

  1. Transifex duplicates the search input on your site and replaces it with one that's styled exactly the same as the original. The original input is hidden temporarily.
  2. When you type in a search term and press enter, the search term is sent to Transifex and machine translated from the locale the user was using on your site to your site's source language.
  3. Once the search term is translated, it's put back into the original input. Then the form is triggered to submit itself.

Then on the search results page (assuming there are results matching the search term):

  • If a result is a 100% match with an existing translation in Transifex, the translation is simply shown on the page.
  • For results that are not 100% matches – for example, if only a snippet like "...your credit card information will be saved for the next payment..." is shown in the results – they're sent to Transifex for fuzzy translation.

Setting up Live Search

To set up Live Search on your site, you need to mark your search input, search term, and search results with special search attributes. This tells Transifex Live which parts of a page are search-related content, and which parts are regular content.

There are three tag attributes you can use:

  • tx-search="input" for marking search inputs
  • tx-search="term" for marking search terms
  • tx-search="results" for marking search results

Let's say we have the following HTML:

<div>
  <!-- Search input form -->
  <form>
    <input name="query" placeholder="Search" type="search" />
    <button type="submit">Search</button>
  </form>
  <!-- Search term (if exists after search) -->
  <div>You searched for "payment"</div>
  <!-- Search results (if exist after search) -->
  <div>
    <div>We found 2 results</div>
    <ul>
      <li>
        <a href="/pricing">Pricing</a>
        <span>
          ...your credit card information will be saved for the next payment...
        </span>
      </li>
      <li>
        <a href="/billing">Billing page</a>
        <span>
          VISA, MasterCard, and PayPal are all supported payment methods
        </span>
      </li>
    </ul>
  </div>
</div>

Once you've added the special search attributes, your HTML will look something like this:

<div>
  <!-- Search input form -->
  <form>
    <input tx-search="input" name="query" placeholder="Search" type="search" />
    <button type="submit">Search</button>
  </form>
  <!-- Search term (if exists after search) -->
  <div>You searched for "<span tx-search="term">payment</span>"</div>
  <!-- Search results (if exist after search) -->
  <div>
    <div>We found <span class="notranslate">2</span> results</div>
    <ul tx-search="results">
      <li>
        <a href="/pricing">Pricing</a>
        <span>
          ...your credit card information will be saved for the next payment...
        </span>
      </li>
      <li>
        <a href="/billing">Billing page</a>
        <span>
          VISA, MasterCard, and PayPal are all supported payment methods
        </span>
      </li>
    </ul>
  </div>
</div>

For search results, the tx-search="results" attribute can also be used in a more fine grain way by targeting the string results one by one, instead of a container block, like so:

...
<ul>
  <li>There are the results:</li>
  <li>
    <span>Result 1</span>
    <a href="/pricing" tx-search="results">Pricing</a>
    <span tx-search="results">
      ...your credit card information will be saved for the next payment...
    </span>
  </li>
  <li>
    <span>Result 2</span>
    <a href="/billing" tx-search="results">Billing page</a>
    <span tx-search="results">
      VISA, MasterCard, and PayPal are all supported payment methods
    </span>
  </li>
</ul>
...