function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Rony57Rony57 

autocomplete text box in account page

Hello All please pay attention to this  I have a autocomplete vf page  in which the  one text box is there search account name. i want that whenever the user enter  the name  then the name should come along with his phone number.. right now  only number is coming /Below is the  VF  code and controller code
Vf page:- 
<apex:page controller="AutoCompleteController" >
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js" />
    <apex:styleSheet value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/smoothness/jquery-ui.css" />
    
    <style>
        .displayNone { 
            display:none; 
        }
        .displayBlock {
            display:block;
        }
        .ui-autocomplete-loading { 
            background: white url(/img/loading32.gif) right center no-repeat;
            background-size:15px 15px; 
        }
        .placeHolder {
            font-style: italic;
        }
    </style>
    
    <apex:form id="autoCompleteForm" >
        
        <apex:pageBlock id="searchBlock" >
            <apex:pageBlockSection id="searchSection" title="Search Your Account" columns="1" >
                 <apex:outputLabel value="Account Name" for="AccountBox" />
                 <apex:outputPanel >
                     <apex:inputText id="AccountTextBox" value="{!searchTerm}" styleClass="placeHolder"/>
                     <apex:inputHidden id="searchAccountId" value="{!selectedAccount}" />
                 </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
        
    </apex:form>
    
    <script type="text/javascript">
        var PLACEHOLDER = 'Enter Account Name Here'; 
        var AccountObjects;
        var queryTerm;
        $('[id$=AccountTextBox]').autocomplete({
            minLength: 2,
            source: function(request, response) {
                        queryTerm = request.term;
                        AutoCompleteController.searchAccount(request.term, function(result, event){
                            if(event.type == 'exception') {
                                  alert(event.message);
                            } else {
                                 AccountObjects = result;
                                 response(AccountObjects );
                            }
                        });
                   },
            focus: function( event, ui ) {
                    $('[id$=AccountTextBox]').val( ui.item.Name );
                    return false;
                    },
            select: function( event, ui ) {
                        $('[id$=AccountTextBox]').val( ui.item.Name );
                        $('[id$=AccountTextBox]').val( ui.item.Phone);
                        $('[id$=searchAccountId]').val( ui.item.Id );
                        return false;
                    },
         })
         .data( "autocomplete" )._renderItem = function( ul, item ) {
            var entry = "<a>" + item.Name;
             var entry = "<a>" + item.Phone;
           
            entry = entry + "</a>";
            entry = entry.replace(queryTerm, "<b>" + queryTerm + "</b>");
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( entry )
                .appendTo( ul );
        };
            
        // Add or remove placeholder values
        $('[id$=AccountTextBox]').val(PLACEHOLDER);
        $('[id$=AccountTextBox]').on("focus",  function(event){
            $tgt = $(event.target);
            if($tgt.val() === PLACEHOLDER ){
                $tgt.val('');
                $tgt.removeClass('placeHolder');
            }
        });
        $('[id$=AccountTextBox]').on( "blur",  function(event){
            $tgt = $(event.target);
            if($tgt.val() === '' ){
                $tgt.val(PLACEHOLDER);
                $tgt.addClass('placeHolder');
            }
        });
    </script>
</apex:page>
Controller:-
public with sharing class AutoCompleteController {
    
    // Instance fields
    public String searchTerm {get; set;}
    public String selectedAccount {get; set;}
    
    // Constructor
    public AutoCompleteController() {
        
    }
    
    // JS Remoting action called when searching for a account name
    @RemoteAction
    public static List<Account> searchAccount(String searchTerm) {
        System.debug('Account Name is: '+searchTerm );
        List<Account> Account= Database.query('Select Id, Name, Phone from Account where name like \'%' + String.escapeSingleQuotes(searchTerm) + '%\'');
        return Account;
    }
    
}
Best Answer chosen by Rony57
Dushyant SonwarDushyant Sonwar
Hi Anurag,
You have declared entry variable two times so your last decalred variable is showing phone number rather than name with phone number
var entry = "<a>" + item.Name;
 var entry = "<a>" + item.Phone;
change with this line
var entry = "<a>" + item.Name;
entry+="<a>" + item.Phone;
Hope this helps

All Answers

Dushyant SonwarDushyant Sonwar
Hi Anurag,
You have declared entry variable two times so your last decalred variable is showing phone number rather than name with phone number
var entry = "<a>" + item.Name;
 var entry = "<a>" + item.Phone;
change with this line
var entry = "<a>" + item.Name;
entry+="<a>" + item.Phone;
Hope this helps
This was selected as the best answer
Rony57Rony57
@dushyant Yeahh..!!! Got it ..!! Thanx alot ..:) and one  more thing i  just want to go to the detail account page whenever  i click on  the particular account name ..What procedure is for that ?? 
Dushyant SonwarDushyant Sonwar
Hey Anurag,
just do little bit change something like this.
var entry = "<a href=\"/"+item.id+" \">" + item.Name;
to send it account detail page
Ashutosh Rajput 5Ashutosh Rajput 5
Hi Rony/Dushyant,
Same account page doesn't work for me, When i entered account name in text area,It doesn't any result, and giving below an error in jquery.Could you please pls help me out. 
Uncaught ReferenceError: AutoCompleteController is not defined