Simulating live typing in jQuery

Question

I am trying to write a script that converts an input's current value(int) to words.

var th = ['', 'thousand', 'million', 'billion', 'trillion'];
var dg = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var tn = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
var tw = ['twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];

function toWords(s) {
    s = s.toString();
    s = s.replace(/[\, ]/g, '');
    if (s != parseFloat(s)) return 'You must enter a number';
    var x = s.indexOf('.');
    if (x == -1) x = s.length;
    if (x > 15) return 'too big';
    var n = s.split('');
    var str = '';
    var sk = 0;
    for (var i = 0; i < x; i++) {
        if ((x - i) % 3 == 2) {
            if (n[i] == '1') {
                str += tn[Number(n[i + 1])] + ' ';
                i++;
                sk = 1;
            }
            else if (n[i] != 0) {
                str += tw[n[i] - 2] + ' ';
                sk = 1;
            }
        }
        else if (n[i] != 0) {
            str += dg[n[i]] + ' ';
            if ((x - i) % 3 == 0) str += 'hundred ';
            sk = 1;
        }
        if ((x - i) % 3 == 1) {
            if (sk) str += th[(x - i - 1) / 3] + ' ';
            sk = 0;
        }
    }
    if (x != s.length) {
        var y = s.length;
        str += 'point ';
        for (var i = x + 1; i < y; i++) str += dg[n[i]] + ' ';
    }
    return str.replace(/\s+/g, ' ');
    return false;
}


var input = $('#numbers'),
    label = $('.words'),
    converted = toWords(input.val());

input.bind('keyup keydown', function() {
    converted = toWords(this.value)
    setTimeout(function() {
        label.empty().text(converted);
    }, 1000);
});​

At this point, I am able to live type whatever I enter, but once I send it through the toWords function, it grabs the value of the input that was given when the page loaded.

In other words, it doesn't update the input field's value with my new number entered, which should then convert to words.

Any ideas? - http://jsfiddle.net/qTBxv/211/

Answer 1

You have to update the converted variable with the input's new value.

$(document).ready(function(){
    input.bind('keyup', function() {
        setTimeout(function() {
            converted = toWords(input.val());
            label.append(converted);
    }, 500);
    });
});

Demo: http://jsfiddle.net/qTBxv/214/

Answer 2

Add a call to toWords , passing current input value in attached event as well.

input.bind('keyup keydown', function() {
    converted = toWords(this.value)
    setTimeout(function() {
        label.empty().text(converted);
    }, 1000);
});​

DEMO

Answer 3

You need to make sure to update converted every time the value changes (in this case, you're hooking into key events, so you can do it there). Like so:

var input = $('#numbers'),
    label = $('.words'),
    converted;

input.bind('keyup keydown', function() {
    converted = toWords(input.val());
    setTimeout(function() {
        label.empty().text(converted);
    }, 1000);
});​

That seemed to fix it for me.

Answer 4

我可能建议angularJS作为您的最终答案。