Simulate KeyPress with on-screen keyboard for typeahead.js

Question

I'm creating a touch-friendly onscreen keyboard for a mobile prototype. We are not using any default device keyboards, rather a custom, onscreen keyboard (for research reasons this is unavoidable) that fills an input field using the following code:

html:

<input id="tags" class="typeahead" type="text" placeholder="Enter keyword">

<ul id="keyboard">
   <li class="letter">1</li>
   <li class="letter">2</li>
   <li class="letter">3</li>
   <li class="letter">4</li>
   <li class="letter">5</li>
   <li class="letter">6</li>
   <li class="letter">7</li>
   <li class="letter">8</li>
   <li class="letter">9</li>
</ul>

jquery:

var $write = $('#tags');
$('#keyboard li').click(function(press){
    var $this = $(this),
        character = $this.html();
    $write.val($write.val() + character);
};

This was working fine on our tablet device, until I wanted to add typeahead.js functionality so we could populate suggestions from our database. Unfortunately typeahead.js doesn't read what's in the field until a key is pressed, and because I'm using a virtual keyboard - there are no keydown events!

The actual code is much larger than this, there is actually a fully functional keyboard as far as our needs go, so I'd prefer not to switch to another input methods so near the finish line.

If there's a way to either make it so that typeahead is able to register whatever is in the input field and still function on screen taps, or a way to simulate a keypress event in my keyboard.js, that would be awesome. I am willing to add something to typeahead, or to my code.

Your advice will be greatly appreciated!

score 1 · Answer 1 · answered May 23 '15 at 05:21

You can use var text = $('.typeahead').typeahead('val'); to get the current value in the input and $('.typeahead').typeahead('val', 'updated-text'); to set the input. Which will automatically trigger the dropdown as well.

Here is a reference

So your method can look something like this

var $write = $('#tags'); // assuming that this is typeahead instance
$('#keyboard li').click(function(press){
    var $this = $(this),
        character = $this.html();
    var updatedText = $write.typeahead('val') + character;
    $write.typeahead('val', updatedText);
};

Simulate KeyPress with on-screen keyboard for typeahead.js

1 Answers1