Type in an input and generate an acronym in the second input with 3 characters

Question

Hello! I need help!! I would like to create an acronym for the client with 3 characters, when I type in the first input will generate in the second input, examples: "ABOBORA" generates "ABO", "ABOBORA DOURADA" generates "ABD", "ToSILLY DOURADA BONITA" generates "ADB".

Have:

<input type="text" name="nomeCliente" value="<?php echo $this->input->post('nomeCliente'); ?>" class="form-control text-uppercase nomeSigla" id="nomeCliente" />

<input type="text" minlength="3" maxlength="3" name="siglaCliente" value="<?php echo $this->input->post('siglaCliente'); ?>" class="form-control text-uppercase siglaSigla" id="siglaCliente" />

I’d like to take the data from class for use in other forms (Contacts, suppliers, etc).

I tried to start the tests using this code, but only copies it to the next input and does not limit the second to 3 characters.

$(".nomeSigla").on('input',function(event) {
   var data=$(this).val();
   $(".siglaSigla").val(data);

});

Thank you very much!

Answer 1

First I created two inputs:

<input type="text" class="full-text" placeholder="Texto completo">
<input type="text" class="short-text" placeholder="Texto abreviado">

And now the Javascript code (is not super optimized, but is working):

$('.full-text').keyup((event) => {
  const text = event.target.value

  // Verifica se o input .full-text possui algum espaço em branco
  if (hasWhiteSpace(text)) {
    const separatedText = text.split(" ")
    const firstWord = separatedText[0]
    const secondWord = separatedText[1]
    const thirdWord = separatedText[2]

    // Caso o usuário só tenha digitado duas palavras, pegue as duas primeiras letras da primeira palavra e a última letra da terceira
    if (!thirdWord) {
      $('.short-text').val(getFirstTwoLetters(firstWord) + getFirstLetter(secondWord))
    // Caso não, pegue a primeira letra de cada uma das palavras
    } else {
      $('.short-text').val(getFirstLetter(firstWord) + getFirstLetter(secondWord) + getFirstLetter(thirdWord))
    }
  } else {
    // Caso o usuario só tenha digitado uma palavra, pegue as três primeiras letras desta palavra
    $('.short-text').val(getFirstThreeLetters(text))
  }
})

const getFirstLetter = s => {
  if (!s) return '';

  return s.charAt(0)
}

const getFirstTwoLetters = s => {
  return s.substring(0, 2)
}

const getFirstThreeLetters = s => {
  return s.substring(0, 3)
}

const hasWhiteSpace = (s) => {
  return s.indexOf(' ') >= 0;
}

Here’s the code working: https://jsfiddle.net/sj1an9yf/9/

P.S.: the user may happen to type the following: "A " (the letter "A" and two empty spaces), so I advise removing the empty spaces of this string before saving to the BD.