Encontrar el primer carácter de la entrada en un cuadro de texto

Question

Estoy atascado en la implementación de los siguientes:

1. El usuario empieza a escribir en un cuadro de texto.
2. El javascript en la página capta el primer carácter escrito, valida que se trata de un alfabeto Inglés (a-z, A-Z) y la convierte a minúsculas (si es necesario).
3. Hacer una petición XMLHttp basado en la entrada (es decir, si el primer carácter de entrada es una, obtener a.xml, si b conseguir b.xml y así sucesivamente).

Yo sé cómo hacer la última parte (hacer la petición xmlhttp), pero estoy un poco atascado sobre la manera de capturar el primer carácter y validarlo (de una manera que funciona en todos los navegadores). Por favor guíe. Gracias.

Aclaración . Esto es para crear un menú de Google Suggest como autocompletar-desplegable y sin la necesidad de programas del lado del servidor

Answer 1

Algo como esto debería funcionar:

HTML:

<input type="text" id="myField" />

Y en JS:

window.onload = function() {
    document.getElementById('myField').onkeyup = function() {
        // Validate that the first letter is A-Za-z and capture it
        var letter = this.value.match(/^([A-Za-z])/);

        // If a letter was found
        if(letter !== null) {
            // Change it to lowercase and update the value
            letter = letter[0].toLowerCase();
            this.value = letter + this.value.substring(1);

            // Do the request
        }
    }
}

Mis habilidades de vainilla-JS son un poco oxidado, pero esto debe hacer el truco. Sólo por el gusto de hacerlo, aquí es el mismo usando jQuery:

$(function() {
    $('#myField').keyup(function() {
        var letter = $(this).val().match(/^([A-Za-z])/);

        // If a letter was found
        if(letter !== null) {
            // Change it to lowercase and update the value
            letter = letter[0].toLowerCase();
            $(this).val(letter + $(this).val().substring(1);

            // Do the request
        }
    });
});

Answer 2

¿Qué parte del problema es que no sabes cómo hacerlo? Aquí es un enfoque que puede seguir. Muy probable que necesite una modificación, pero es un buen punto de partida

Si el ID de nuestro campo de texto se 'txt'

document.getElementByID('txt').onkeypress = function(e) {
  var textInField = this.value;
  if (textInField.length == 1) {
    var firstChar = textInField.charAt(0);
    if (/[a-zA-Z]/.test(firstChar)) {
      sendXHR(textInField.value.toLowerCase())
    }
  } else {
    // What do you do if there is one or more chars???
  }
}

Tenga en cuenta que las otras respuestas aquí mencionan onchange, que no se activa hasta el foco sale del campo, que no creo que es lo que desea