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>