Localization in Vue AutoComplete

03 Sep 20264 minutes to read

The Localization library allows you to localize static text content of the noRecordsTemplate and actionFailureTemplate properties according to the culture currently assigned to the AutoComplete.

Locale key en-US (default)
noRecordsTemplate No Records Found
actionFailureTemplate The Request Failed

Loading translations

To load a translation object into your application, use the load function of the L10n class. The L10n class is imported from @syncfusion/ej2-base. In the following sample, French culture is set to the AutoComplete using the locale property and no data is loaded.

Hence, the noRecordsTemplate property displays its text in French culture initially. If the sample is run offline, the actionFailureTemplate property displays its text appropriately.

<template>
  <div id="app">
    <ejs-autocomplete :dataSource='data' :locale='locale' :fields='fields' sortOrder='sortOrder' :query='query'
      :placeholder="waterMark"></ejs-autocomplete>
  </div>
</template>
<script setup>
import { AutoCompleteComponent as EjsAutocomplete } from '@syncfusion/ej2-vue-dropdowns';
import { L10n } from '@syncfusion/ej2-base';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

const remoteData = new DataManager({
  url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
  adaptor: new ODataV4Adaptor,
  crossDomain: true
});

L10n.load({
  'fr-BE': {
    'dropdowns': {
      noRecordsTemplate: "Aucun enregistrement trouvé",
      actionFailureTemplate: "Modèle d'échec d'action"
    }
  },
});

const waterMark = 'Trouver un client';
const query = new Query().select(['ContactName', 'CustomerID']);
const data = remoteData;
const locale = 'fr-BE';
const fields = { value: 'ContactName' };
const sortOrder = 'Ascending';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";

#app {
  color: #008cff;
  height: 40px;
  left: 35%;
  position: absolute;
  top: 15%;
  width: 30%;
}
</style>
<template>
  <div id="app">
    <ejs-autocomplete :dataSource='data' :locale='locale' :fields='fields' sortOrder='sortOrder' :query='query'
      :placeholder="waterMark"></ejs-autocomplete>
  </div>
</template>
<script>
import { AutoCompleteComponent } from '@syncfusion/ej2-vue-dropdowns';
import { L10n } from '@syncfusion/ej2-base';
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

const remoteData = new DataManager({
  url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
  adaptor: new ODataV4Adaptor,
  crossDomain: true
});

L10n.load({
  'fr-BE': {
    'dropdowns': {
      noRecordsTemplate: "Aucun enregistrement trouvé",
      actionFailureTemplate: "Modèle d'échec d'action"
    }
  },

});

export default {
  name: "App",
  components: {
    "ejs-autocomplete": AutoCompleteComponent
  },
  data() {
    return {
      waterMark: 'Trouver un client',
      query: new Query().select(['ContactName', 'CustomerID']),
      data: remoteData,
      locale: 'fr-BE',
      fields: { value: 'ContactName' },
      sortOrder: 'Ascending'
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";

#app {
  color: #008cff;
  height: 40px;
  left: 35%;
  position: absolute;
  top: 15%;
  width: 30%;
}
</style>

See also