<p dir="auto">Rather than the complex script for radio buttons, we should go for a more semantically meaningful option similar to the one in the link below (yes I know it's using javascript but that's only to apply the active class for demonstration).</p>
<p dir="auto">It is more complex semantically but it gets rid of the javascript and adds native form support.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;btn-group&quot;&gt;
    &lt;label for=&quot;one&quot; class=&quot;btn&quot;&gt;
        &lt;input id=&quot;one&quot; name=&quot;num&quot; type=&quot;radio&quot; /&gt;
        One
    &lt;/label&gt;
    &lt;label for=&quot;two&quot; class=&quot;btn&quot;&gt;
        &lt;input id=&quot;two&quot; name=&quot;num&quot; type=&quot;radio&quot; /&gt;
        Two
    &lt;/label&gt;
    &lt;label for=&quot;three&quot; class=&quot;btn&quot;&gt;
        &lt;input id=&quot;three&quot; name=&quot;num&quot; type=&quot;radio&quot; /&gt;
        Three
    &lt;/label&gt;
    &lt;label for=&quot;four&quot; class=&quot;btn&quot;&gt;
        &lt;input id=&quot;four&quot; name=&quot;num&quot; type=&quot;radio&quot; /&gt;
        Four
    &lt;/label&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="btn-group"&gt;
    &lt;label for="one" class="btn"&gt;
        &lt;input id="one" name="num" type="radio" /&gt;
        One
    &lt;/label&gt;
    &lt;label for="two" class="btn"&gt;
        &lt;input id="two" name="num" type="radio" /&gt;
        Two
    &lt;/label&gt;
    &lt;label for="three" class="btn"&gt;
        &lt;input id="three" name="num" type="radio" /&gt;
        Three
    &lt;/label&gt;
    &lt;label for="four" class="btn"&gt;
        &lt;input id="four" name="num" type="radio" /&gt;
        Four
    &lt;/label&gt;
&lt;/div&gt;
</code></pre></div>
<blockquote>
<p dir="auto"><a href="http://jsfiddle.net/JamesKyle/RWa7M/" rel="nofollow">http://jsfiddle.net/JamesKyle/RWa7M/</a></p>
</blockquote>
<p dir="auto">My data source returns objects instead of strings (because they carry additional metadata besides the autocomplete label)</p>
<p dir="auto">I can get away with this by overriding every callback to perform the requested logic only on the label, but for some reason, the 'updater' callback returns an [Object object] string instead of my actual data. Browsing the source, I found out that typeahead stores the value it passes to the updater callback in the data-value attribute of the generated entity, which is where it gets coerced to string.</p>
<p dir="auto">The most obvious solution (that I have applied already to my local code) is to JSON encode the value before being sent to the data-value attribute, but that comes with a performance hit, which is why I'm not providing the patches.</p>
<p dir="auto">While it could be argued that this could have been avoided by monkeypatching the metadata to the string label, there's no direct way of achieving this using just JSON.</p>