Wild Homes Barcode Scanner

accepts keystrokes generated by a barcode scanner, and updates entries via ajax.

by Wray Bowling

HTML

<input type="text" placeholder="Select this box" id="barcode_input_field">

<div id="status">
<span id="ok">Ready to scan!</span>
<span id="waiting">⬅Select input field</span>
</div>

<div id="modes">
<a href="javascript:void(0)">received at NCSU</a>
|
<a href="javascript:void(0)">shipping to lab</a>
<a href="javascript:void(0)">data completed</a>
</div>

<div id="output">
</div>

CSS

#barcode_input_field{
    float:left;
}

#status #ok{
    background-color:green;
    color:white;
}

#status #waiting{
    background-color:yellow;
}

#modes a{
    background-color:blue;
    color:white;
    text-decoration:none;
}

#modes a.selected {
    background-color:orange;
}

div#output{
    overflow-y:scroll;
    height:200px;
    background-color:tan;
}

JavaScript

var $barcode_input_field = $('#barcode_input_field');
var $status = $('#status');

var barcode_regex = /_(OUTERDOOR|INNERDOOR|COUNTER|PILLOW)-\d+_/;

function keystrokeHandler(event) {
    var matching = $barcode_input_field.val().match(barcode_regex);
    if(!!matching){
        console.log(matching);
        $('<div class="status">This is a status for: '
          + $barcode_input_field.val()
          + '</div>')
          .appendTo('#output');
        $barcode_input_field.val('');
    }else{
        // do nothing        
    }
}

$barcode_input_field.live('keyup', keystrokeHandler);

$barcode_input_field.live('focus',function(){
    $status.children('span').hide();
    $status.children('#ok').show();
});

$barcode_input_field.live('blur',function(){
    $status.children('span').hide();
    $status.children('#waiting').show();
});

$('#modes a').click(function(){
    console.log('did it');
    $('#modes a').removeClass('selected');
    $(this).addClass('selected');
    $barcode_input_field.focus();    
});

$barcode_input_field.focus();