Thursday, August 11, 2016

AutoComplete in Visualforce Textbox/ InputText

Hi,

As a lot of users are trying to get auto-populate the data in the textbox. please try the below code

In the below code the search is based on the contact object. Search result based on contacts first name and last name.
<apex:page >
        <script language="JavaScript" src="/soap/ajax/10.0/connection.js"></script>
        <script language="JavaScript">
             
            var req = null;
            sforce.connection.sessionId ="{!$Api.Session_ID}";
             
            function loadXMLDoc(typed) {
                if(typed =='')
                {
                    document.getElementById("searchResult").style.display = 'none'; 
                }else{
                    document.getElementById("searchResult").style.display = 'block'; 
                    sforce.connection.query("select Name,Id from Contact where Name like '" + typed + "%' limit 10", onSuccess);
                }
            }
 
            function onSuccess(result) {
                var sb = "";
                var records = result.getArray("records");
                for (var i = 0; i < records.length && i < 10; i++) {
                    sb += "<span id="+records[i].Name +" onclick='divFunction(this.innerText);'>"+records[i].Name + "</span><br>";
                }
                getObject("searchResult").innerHTML = sb;
            }
 
            function getObject(name) {
                var ns4 = (document.layers) ? true : false;
                var w3c = (document.getElementById) ? true : false;
                var ie4 = (document.all) ? true : false;
 
                if (ns4) return eval('document.' + name);
                if (w3c) return document.getElementById(name);
                if (ie4) return eval('document.all.' + name);
                return false;
            }
 
            window.onload = function() {
                getObject("q").focus();
                document.getElementById("searchResult").style.display = 'none'; 
            }
             
            function divFunction(name){
                document.getElementById("q").value=name;
                 document.getElementById("searchResult").style.display = 'none'; 
                 alert('You have selected '+name);
            }
        </script>
     
        <div align="center">
            <form>
                <div align="left">
                    <table>
                        <tbody><tr>
                            <td>
                            Contact Name :
                            </td>
                            <td>
                                <input autocomplete="off" type="text" name="q" id="q" size="20" onkeyup="loadXMLDoc(this.value)" style="width:200px;" ></input>
                            </td>
                        </tr>
                            <tr>
                            <td></td>
                            <td>
                                <div align="left" id="searchResult" name="searchResult" style="font-family:Arial; border:#000000 solid 1px; font-size:12px; width:200px; padding:4px; margin:0"></div> 
                            </td>
                        </tr>
                    </tbody></table>
                </div>
            </form>
        </div>
</apex:page>


3 comments :

Labels

visualforce page ( 13 ) apex integration ( 5 ) apex trigger ( 4 ) csv file from vf page ( 4 ) javascript ( 4 ) csv visualforce page ( 3 ) Too many ( 2 ) call out ( 2 ) integration ( 2 ) rest api ( 2 ) salesforce rest api ( 2 ) salesforce to salesforce integration ( 2 ) sfdc rest api ( 2 ) trigger ( 2 ) 15 digit to 18 digit ( 1 ) DML rows in Apex ( 1 ) Date Conversion ( 1 ) Date/Time conversion ( 1 ) Deploy ( 1 ) Objects to Future Annotated Methods ( 1 ) SFDC limits ( 1 ) Sobject to Future Annotated Methods ( 1 ) Test Class ( 1 ) TimeZone Conversion ( 1 ) Too many dml rows ( 1 ) Too many future calls ( 1 ) annotations ( 1 ) apex code ( 1 ) closed opportunities ( 1 ) commit ( 1 ) convert ( 1 ) create records ( 1 ) csv create records ( 1 ) custom setting ( 1 ) deployment ( 1 ) deployment changeset ( 1 ) disable apex class ( 1 ) disable apex trigger ( 1 ) disable in production ( 1 ) document ( 1 ) download ( 1 ) field name ( 1 ) formula fields ( 1 ) iframe ( 1 ) inactive ( 1 ) intellisense ( 1 ) jsforce ( 1 ) limits ( 1 ) matrix report in vf page ( 1 ) multi select ( 1 ) multi select salesforce ( 1 ) multiselect ( 1 ) paypal ( 1 ) picklist ( 1 ) record type ( 1 ) rollback ( 1 ) salesforce limits ( 1 ) salesforce list ( 1 ) salesforce map ( 1 ) salesforce rest ( 1 ) salesforce set ( 1 ) salesforce1 ( 1 ) sandbox deployment ( 1 ) sfdc collection ( 1 ) sfdc list ( 1 ) sfdc map ( 1 ) sfdc rest ( 1 ) sfdc set ( 1 ) uncommitted ( 1 ) updated field ( 1 ) user ( 1 ) validation rule opportunity ( 1 ) validation rules opportunities ( 1 ) vf page ( 1 )

Ad