Динамический перевод введённых пользователем данных при помощи API Яндекс.Переводчика

Вводная

Пишу на досуге одну хитрую систему, и появилась необходимость на лету переводить данные, которые вводит пользователь. В контексте моего приложения это input, куда пользователь вводит русское название, и нам надо перевести его тут же на английский, чтобы потом использовать в коде. Все нюансы тут не важны, расскажу лишь, о том как решать подобные задачи при помощи API Яндекс Переводчика.

“Сырцы”

Вот выдранный из моего исходника код, написанный при помощи jQuery.

	// переводчик для получения кода имени класса на англицком
	$('input.tr-from').live('blur', function(){
		index = $('input.tr-from').index(this);
		$.getJSON('http://translate.yandex.net/api/v1/tr.json/translate', {lang: 'ru-en', text: $(this).val()}, function(data){
			$('input.tr-to').eq(index).val(data.text);
		});
	});

И кусочек разметки, чтобы было понятно что, откуда и куда:

<input type="text" placeholder="type name of this attribute" required="required" class="tr-from" name="name[]">
<input type="text" placeholder="code" required="required" class="tr-to" name="code[]">

Препарируем

У нас есть два тестовых поля, одно для пользовательского ввода, второе для подстановки перевода. В своём случае я не ограничиваю пользователя в возможности отредактировать перевод, но в некоторых случаях можно (и нужно) защитить перевод от изменения, сделав второе поле readonly, либо disabled. Я не пробовал, но думаю оба атрибута дадут одинаковый результат: заблокируют input от изменений пользователем. Можно и вообще скрыть это поле, сделав его типа hidden.

У полей разные классы, которые используются скриптом для определения направления перевода: tr-from — из него берём фразу для перевода, и tr-to — сюда помещаем перевод.

При помощи $.getJSON() запрашиваем у Яндекса перевод. Строка запроса выглядит так: http://translate.yandex.net/api/v1/tr.json/translate?lang=ru-en&text=слово. Тут всё просто, скромный функционал API описан на сайте, ссылку на который я уже привёл. Из полученного JSON в callback-функции мы забираем значение text и вставляем в качестве value для соответствующего инпута.

Нюансы

В коде есть несколько нюансов, которые возможно требуют пояснения для людей, которые лишь поверхностно знакомы с jQuery. На одной странице мы можем поместить любое количество пар input, с классами tr-from и tr-to. Для того чтобы вставить перевод в нужное поле для перевода, которое в разметке идет следом за соответствующим полем для ввода, используется eq(index). Нужный номер пары мы получаем в строке index = $('input.tr-from').index(this);

Обработчик live() вместо bind, был мной использован поскольку пары полей в форме генерируются пользователем по мере надобности =).