Unable to set focus on an input of Twitter Bootstrap's Typeahead

Question

When I remove these attributes:

data-source="<?=str_replace('"', '&quot;', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>" data-items="4" data-provide="typeahead"

I am able to perform this:

$(document).ready(function() {
    $('.first').focus();
});

This is my HTML markup for this:

<div class="itemx">
    <input type="text" class="input-large first" autocomplete="off" placeholder="Equipment Name/Label" name="equip[]" data-source="<?=str_replace('"', '&quot;', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>" data-items="4" data-provide="typeahead" />
    <input type="text" class="input-large second" placeholder="Quantity" name="quant[]" />
</div>

NOTE: Typeahead works well an this it's nothing wrong with this:

data-source="<?=str_replace('"', '&quot;', json_encode($equipment, JSON_HEX_TAG | JSON_HEX_APOS)); ?>"

Answer 1

I recently had this issue. It fixed itself when I declared the .typeahead() code block first, and then gave the field focus. If I reversed the order, the .typeahead() functionality broke.

$('#myField').typeahead({
    ...
});

$('#myField').focus();