Hide part of a string, but make it searchable

Question

I'm using chosen for a list of smartphones. They are either Samsung, HTC, Motorola, or LG, so they all contain that brand name.

The entire name is very long and it looks really bad, because my width is limited. How can I allow the user to search for "Samsung Galaxy", but hiding the "Samsung" part ?

This is my code right now (without the brand included). I keep trying to make Chosen search for the given strings without displaying them, but I can't find any workaround.

<optgroup label="Acer">
    <option value="acer-iconia-tab-a100">Iconia Tab A100</option>
</optgroup>
<optgroup label="Amazon">
    <option value="amazon-kindle-fire">Kindle Fire</option>
    <option value="amazon-kindle-fire-2">Kindle Fire HD</option>
</optgroup>
<optgroup label="Asus">
    <option value="asus-transformer-tf300t">Transformer TF300T</option>
</optgroup>
<optgroup label="Google">
    <option value="google-glass">Glass</option>
    <option value="google-nexus-10">Nexus 10</option>
    <option value="google-nexus-4">Nexus 4</option>
    <option value="google-nexus-5">Nexus 5</option>
    <option value="google-nexus-7">Nexus 7</option>
    <option value="google-nexus-7-2013">Nexus 7 2013</option>
    <option value="google-nexus-q">Nexus Q</option>
    <option value="sprint-nexus-s-4g">Sprint Nexus S 4G</option>
</optgroup>
<optgroup label="HP"></optgroup>

Thanks !

Answer 1

You could add a data value to your options:

<option value='samsung-galaxy-s4' data-name='Samsung Galaxy S4'> Galaxy S4 </option>

and then do searching against that value.