Smart Search in Visualforce page

 Hi,

Here we are going to learn how can we provide smart search with the help of HTML 5 attribute "list" in a visualforce page if your browser supports HTML5.

Sample Controller:

public class SmartSearchController {

    public List<String> accountNameList{get;set;}   

    public String selectedName{get;set;}

        

    public SmartSearchController(){

        accountNameList = new List<String>();

        for(Account actObj:[select id,name from Account limit 20]){

            accountNameList.add(actObj.Name);

        }

    }

}

Sample Visualforce Page:

<apex:page docType="html-5.0" cache="false" sidebar="false" showheader="false" standardStylesheets="false" controller="SmartSearchController">

    <apex:form>

        <apex:pageBlock title="Smart Search">

            <apex:inputText list="{!accountNameList}" value="{!selectedName}"/>        

        </apex:pageBlock>

    </apex:form>

</apex:page>

Note: To use "list" attribute on inputText we should specify docType="html-5.0" or heigher version.

Output:

Reference:

https://www.w3schools.com/howto/howto_js_autocomplete.asp

https://www.w3schools.com/tags/att_input_list.asp