A tricky way to create a lookup field in Visualforce page

Recently I am asked how to create a lookup field in a Visualforce page without binding any objects. In this article, I will explain a trick to implement it.

First, let's see how Salesforce implements lookup field in a standard page. Select a contact, then click "Edit" button to go to the edit page. As we know, contact has an Account lookup field, so in the edit page we only care about how Salesforce implements account lookup field. Open source code by selecting "View Source" menu after clicking right mouse button, then move to account lookup field source code. You would see the source code like below:

<input type="hidden" name="con4_lkid" id="con4_lkid" value="001R000000cnfQd"  />
<input type="hidden" name="con4_lkold" id="con4_lkold" value="a"  />
<input type="hidden" name="con4_lktp" id="con4_lktp" value="001"  />   
<input type="hidden" name="con4_lspf" id="con4_lspf" value="0"  />               
<input type="hidden" name="con4_lspfsub" id="con4_lspfsub" value="0"  />  
<input type="hidden" name="con4_mod" id="con4_mod" value="0"  />   
<span class="lookupInput" > 
<input autocomplete="off" id="con4" maxlength="255" name="con4"onchange="getElementByIdCS('con4_lkid').value='';getElementByIdCS('con4_mod').value='1';" size="20"tabindex="4" type="text" value="a"  /> 
<ahref="javascript:%20openLookup%28%27%2F_ui%2Fcommon%2Fdata%2FLookupPage%3Flkfm%3DeditPage%26lknm%3Dcon4%26lktp%3D%27%20%2B%20getElementByIdCS%28%27con4_lktp%27%29.value%2C670%2C%271%27%2C%27%26lksrch%3D%27%20%2B%20escapeUTF%28getElementByIdCS%28%27con4%27%29.value.substring%280%2C%2080%29%29%29" id="con4_lkwgt" onclick="setLastMousePosition(event)" tabindex="4"title="Customer Name Lookup (New Window)" >     
<img src="/s.gif" alt="Customer Name 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="Customer Name Lookup (New Window)" />
</a>

Now let's look at the input elements firstly, the notes below is my assumption, it may not be 100% correct.

1. con4_lkid represents current lookup account id 
2. con4_lkold represents current lookup account name
3. con4_lktp represents object prefix (first three characters)

Next, we will look at the javascript code within href attribute, it is encoded, so we should decode it firstly. You can use any encode/decode tools online (i.e.  http://ostermiller.org/calc/encode.html ). The javascript code would be decoded as below:

javascript: openLookup('/_ui/common/data/LookupPage?lkfm=editPage&lknm=con4&lktp='   getElementByIdCS('con4_lktp').value,670,'1','&lksrch='escapeUTF(getElementByIdCS('con4').value.substring(0, 80))) 


We can see that a few parameters would be passed into lookup page: con4, con4_lktp.

Ok, I think we pretty much understand the source code. Next, we will change the source code a little bit (indicated as red color), and we can use it in a Visualforce page.

<input type="hidden" name=" testlookup _lkid" id=" testlookup _lkid" value="000000000000000"  />
<input type="hidden" name=" testlookup _lkold" id=" testlookup _lkold" value=""  />
<input type="hidden" name=" testlookup _lktp" id=" testlookup _lktp" value="001"  />   
<input type="hidden" name=" testlookup _lspf" id=" testlookup _lspf" value="0"  />               
<input type="hidden" name=" testlookup _lspfsub" id=" testlookup _lspfsub" value="0"  />  
<input type="hidden" name=" testlookup _mod" id=" testlookup _mod" value="0"  />   
<span class="lookupInput" > 
<input autocomplete="off" id=" testlookup " maxlength="255" name="testlookup" onchange="getElementByIdCS(' testlookup _lkid').value='';getElementByIdCS(' testlookup _mod').value='1';" size="20" tabindex="4" type="text" value="a"  /> 
<a href="javascript:%20openLookup%28%27%2F_ui%2Fcommon%2Fdata%2FLookupPage%3Flkfm%3DeditPage%26lknm%3D testlookup %26lktp%3D%27%20%2B%20getElementByIdCS%28%27 testlookup _lktp%27%29.value%2C670%2C%271%27%2C%27%26lksrch%3D%27%20%2B%20escapeUTF%28getElementByIdCS%28%27 testlookup %27%29.value.substring%280%2C%2080%29%29%29" id="con4_lkwgt" onclick="setLastMousePosition(event)" tabindex="4" title="Customer Name Lookup (New Window)" >     
<img src="/s.gif" alt="Customer Name 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="Customer Name Lookup (New Window)" />
</a>

So in your Visualforce page, we should see an account lookup field. What if we want to create other object lookup field, like opportunity. How can we do it? Maybe you have the answer, yes, just change lktp value as below:

From:
<input type="hidden" name=" testlookup _lktp" id=" testlookup _lktp" value="001"  /> 

To:
<input type="hidden" name=" testlookup _lktp" id=" testlookup _lktp" value="006"  /> 

This is a tricky way to implement a lookup field without binding any object/field in visualforce page. Not sure if you have any other way. Of course we can implement your own lookup function, which I will explain the details later.