Using Bootstrap with Visualforce Lookup field

Question

I'm using a prefixed version of Bootstrap to create a Visualforce page where you will lookup a User with a jQuery autocomplete component. The component autohides the SF standard lookup features. I'm having a hard time getting the styling to work... does anyone have any ideas?

Here's a screenshot:

Here's the apex code:

<div class="form-group">
    <label class="control-label col-md-2">Employee</label>
    <div class="col-md-3">
        <apex:inputField id="Employee" value="{!prf.Employee__c}" styleClass="form-control" >
            <c:AutoCompleteController objectname="User" autocomplete_textbox="{!$Component.Employee}" limit="isActive=true"/>
        </apex:inputField>
    </div>
</div>

Here's the rendered html output:

<div class="form-control" id="j_id0:j_id33:j_id34:Employee_top" name="j_id0:j_id33:j_id34:Employee_top" style="white-space: nowrap">
    <select id="j_id0:j_id33:j_id34:Employee_mlktp" name="j_id0:j_id33:j_id34:Employee_mlktp" onchange="LookupAutoCompleteInputElement.handleLookupTypeChange('j_id0:j_id33:j_id34:Employee',false);" title="Search scope" style="display: none;">
        <option value="005" selected="selected">User</option>
        <option value="PartnerUserLookup">Partner User</option>
        <option value="CustomerSuccessUserLookup">Customer Portal User</option>
    </select>
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lkid" id="j_id0:j_id33:j_id34:Employee_lkid" value="000000000000000">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lkold" id="j_id0:j_id33:j_id34:Employee_lkold" value="null">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lktp" id="j_id0:j_id33:j_id34:Employee_lktp" value="StandardUserLookup">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lspf" id="j_id0:j_id33:j_id34:Employee_lspf" value="0">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lspfsub" id="j_id0:j_id33:j_id34:Employee_lspfsub" value="0">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_mod" id="j_id0:j_id33:j_id34:Employee_mod" value="0">
    <span class="lookupInput">
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input id="j_id0:j_id33:j_id34:Employee" maxlength="255" name="j_id0:j_id33:j_id34:Employee" onchange="getElementByIdCS('j_id0:j_id33:j_id34:Employee_lkid').value='';getElementByIdCS('j_id0:j_id33:j_id34:Employee_mod').value='1';" size="20" title="Employee" type="text" class="ui-autocomplete-input" autocomplete="off">
        <script>
            new ForeignKeyInputElement("j_id0:j_id33:j_id34:Employee","/_ui/common/data/LookupValidationServlet",null,true,{"acent":"005"});
        </script>
        <a href="javascript:%20openLookup%28%27%2F_ui%2Fcommon%2Fdata%2FLookupPage%3Flkfm%3Dj_id0%253Aj_id33%26lknm%3Dj_id0%253Aj_id33%253Aj_id34%253AEmployee%26lktp%3D%27%20%2B%20getElementByIdCS%28%27j_id0%3Aj_id33%3Aj_id34%3AEmployee_lktp%27%29.value%2C670%2C%271%27%2C%27%26lksrch%3D%27%20%2B%20escapeUTF%28getElementByIdCS%28%27j_id0%3Aj_id33%3Aj_id34%3AEmployee%27%29.value.substring%280%2C%2080%29%29%29" id="j_id0:j_id33:j_id34:Employee_lkwgt" onclick="setLastMousePosition(event)" title="Employee Lookup (New Window)" style="display: none;"><img src="/s.gif" alt="Employee Lookup (New Window)" class="lookupIcon" onblur="this.className = 'lookupIcon';" onfocus="this.className = 'lookupIconOn';" onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';" title="Employee Lookup (New Window)"></a>
    </span>
</div>

Answer 1

Ok, I think I found a work around -- putting this out there in case anyone else has this issue.

I think the root issue is that in my Org, using a User Lookup adds the other select list with the User Type. Even though I'm hiding that from the autocomplete component, I think it's causing the formatting to be faulty.

When you use a lookup on the page, it adds a hidden field to capture the Id (while you see the Name displayed). This field is the same element Id as the input only with "_lkid" appended to the end. So, I changed my to an to capture the record name, and added an with the Id the same as the inputText only ending in _lkid -- this hidden input is binded to the object's lookup field. This way, I can easily format the inputText with Bootstrap and still pass the Id to the controller.

Here's the final version.

<div class="form-group">
    <label class="control-label col-md-2">Employee</label>
    <div class="col-md-3">
        <apex:inputHidden id="Employee_lkid" value="{!prf.Employee__c}"/>
        <apex:inputText id="Employee" value="{!prf.Name}" styleClass="form-control">
            <c:AutoCompleteController objectname="User" autocomplete_textbox="{!$Component.Employee}" limit="isActive=true"/>
        </apex:inputText>
    </div>
</div>