• Documentation
  • Transifex Live
  • Live Search (Beta)

Live Search (Beta)

Transifex Live Search is a feature that tries to translate arbitrary search results on a website. The website is still responsible for implementing/incorporating a proper search functionality in the source language by querying the database or any other website specific method.

Transifex Live makes the following assumptions when trying to localize search:

  • There is a search input
  • Optionally, the search query appears somewhere on the results page
  • There is a page of search results

Lets take the following HTML as an example:

<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 the supported payment options
        </span>
      </li>
    </ul>
  </div>
</div>

In the above example, we have 3 distinct areas that define a search page. We need to mark those areas by using special search attributes, so that Live can understand that those areas refer to search and normal page content. This can happen using the following tag attributes:

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

Example:

<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 the supported payment options
        </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, e.g.

...
<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>Results 2</span>
    <a href="/billing" tx-search="results">Billing page</a>
    <span tx-search="results">
      VISA, Mastercard and PayPal are the supported payment options
    </span>
  </li>
</ul>
...

How it works

The search input is duplicated and replaced with a new one that keeps the styling of the original. The original input is hidden.

When a user types a string and presses enter that string is sent to Transifex for Machine Translation to the source language.

As soon as the search query is translated, it is placed back to the original input and the search form (if exists) is triggered to submit itself.

The search term is translated by using the Machine Translation of the previous search query.

The search results are translated in the following way:

  • If the result is 100% match of an existing translation it is translated right away.
  • For results that are not (e.g. partial results), they are sent to Transifex for fuzzy translation.

Fuzzy translation is for example the localization of "...your credit card information, will be saved for the next payment...".