[SalesForce] How to create Lookup field in Visualforce page using Bootstrap Library

Can anyone tell me how to create lookup field in viusalforce page using bootstrap library?
My use case is create contact record fields(LastName,AccountName and Lead Source).
For that I have created a page and it doest give the proper style for lookup field..
My VFP as follows: 

<apex:page standardController="Contact" sidebar="false" standardStylesheets="false" showHeader="false" >
  <head> 
    <title>Create New Contact</title>        
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>        
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <apex:includeScript value="{!URLFOR($Resource.js, '/js/bootstrap.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.js, '/js/bootstrap.min.js')}"/>    
    <apex:stylesheet value="{!URLFOR($Resource.css, '/css/bootstrap.css')}"/>
    <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>


    <style type="text/css"><!-- Spacing for the Nav bar -->
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>

    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>

</head>

<body>
     <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            <a class="brand" href="#">Bootstrap Page</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            </ul>
            <span class="navbar-form span3 pull-right">
                <li><a href="#">Right Link</a></li>
            </span>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
    <apex:pageBlock >
        <apex:form >
            <h3>LastName </h3>
            <apex:inputField value="{!Contact.LastName}" styleClass="form-control"  html-placeholder="Enter Your Last Name"  /><br/>
             <h3>Account name</h3>
            <apex:inputField value="{!Contact.accountid}"   styleClass="form-control" html-placeholder="Enter Account Name"  /> <br/>
             <h3>Lead Source </h3>
            <apex:inputField value="{!contact.LeadSource}" styleClass="form-control"   /><br/>


            <apex:commandButton action="{!save}" styleClass="btn btn-success" value="Create New Contact" />

        </apex:form>
    </apex:pageBlock>
    </div> <!-- /container -->

</body>

</apex:page>

The above page gives like
enter image description here

My expectation looks like
enter image description here

Please help me on this.

Thanks in advance
Karthick

Best Answer

If you expect a simple solution with just a few lines of code you won't get it. A good lookup mechanism is internally not simple. But luckily thanks to the component mentioned by @eric the usage is simple.

But since there is a unmanaged package here

http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009KusM

you can install it in a developer org and have a look at the full source code. And also deploy it without any package just using eclipse later.

Related Topic