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
ArunaAruna 

Creating Sear functionality using lighting components but getting error

VF page 

<apex:page standardController="Contact">        
    <apex:includeLightning />
    <div id="Con" />
    <script>
        $Lightning.use("c:ConSearchApp", function() {
            $Lightning.createComponent(
                "c:Comp_SearchContact",
                {},
                "Con",
                function(cmp) {
                    console.log("Component is created!");
                    console.log(cmp);
                });
            });        
      </script>
</apex:page>

Application
<aura:application extends="ltng:outApp" >
     <c:Comp_SearchContact />
</aura:application>

Apex class
public with sharing class searchAccountController {
 
 @AuraEnabled
 public static List < account > fetchAccount(String CustomerMasterAccountName,
                                             String CustomerNumber,
                                             String Name,
                                             String Address,
                                             String City,
                                             String State,
                                             String ZipCode) {
  //String searchKey = searchKeyWord + '%';
  List < Account > returnList = new List < Account > ();
  /*List < Account > lstOfAccount = [select id, Name, Type, Industry, Phone, Fax from account
                                   where Name LIKE: searchKey];*/
 
  for (Account acc: [select id, Name, AccountNumber,Type, Industry, Phone, Fax,BillingState,BillingCity from account
                                   where Name=:CustomerMasterAccountName or 
                                          AccountNumber=:CustomerNumber   or
                                         BillingState=:State or
                                         BillingCity=:City]) {
   returnList.add(acc);
  }
  return returnList;
 }
}
 
Component 
 <aura:component controller="searchAccountController">   
       
    <!-- CREATE ATTRIBUTE/VARIABLE-->
    <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
    
    <aura:attribute name="CustomerMasterAccountName" type="String" description="use for store user search input"/>
    <aura:attribute name="CustomerNumber" type="String" description="use for store user search input"/>
    <aura:attribute name="Name" type="String" description="use for store user search input"/>
    <aura:attribute name="Address" type="String" description="use for store user search input"/>
    <aura:attribute name="City" type="String" description="use for store user search input"/>
    <aura:attribute name="State" type="String" description="use for store user search input"/>
    <aura:attribute name="ZipCode" type="String" description="use for store user search input"/>
    
    <aura:attribute name="Message" type="boolean" default="false" description="use for display no record found message"/>
    <aura:attribute name="TotalNumberOfRecord" type="integer" default="0" description="use for display Number of records"/>
    
    <!-- SHOW LOADING SPINNER--> 
    <lightning:spinner variant="brand" size="large" aura:id="Id_spinner" class="slds-hide" />
    
    <div class="slds-m-around_medium">
       <!-- SEARCH INPUT AND SEARCH BUTTON--> 
        <lightning:layout>
            <lightning:layoutItem size="3" padding="around-small">
                <lightning:input value="{!v.CustomerMasterAccountName}"
                                 required="true"
                                 placeholder="search CustomerMasterAccountName.."
                                 aura:id="CustomerMasterAccountName"
                                 label="Customer Master Account Name"/>
                
                <lightning:input value="{!v.CustomerNumber}"
                                 required="true"
                                 placeholder="search CustomerNumber.."
                                 aura:id="CustomerNumber"
                                 label="Customer Number"/>
                
                <lightning:input value="{!v.Name}"
                                 required="true"
                                 placeholder="search Name.."
                                 aura:id="Name"
                                 label="Name"/>
                
                <lightning:input value="{!v.Address}"
                                 required="true"
                                 placeholder="search Address.."
                                 aura:id="Address"
                                 label="Address"/>
                
                <lightning:input value="{!v.City}"
                                 required="true"
                                 placeholder="search City.."
                                 aura:id="City"
                                 label="City"/>
                
                <lightning:input value="{!v.State}"
                                 required="true"
                                 placeholder="search State.."
                                 aura:id="State"
                                 label="State"/>
                
                <lightning:input value="{!v.ZipCode}"
                                 required="true"
                                 placeholder="search ZipCode.."
                                 aura:id="ZipCode"
                                 label="ZipCode"/>
                
            </lightning:layoutItem>
            <lightning:layoutItem size="2" padding="around-small">
                <lightning:button onclick="{!c.Search}"
                                  variant="brand"
                                  label="Search"
                                  iconName="utility:search"/> 
            </lightning:layoutItem>
        </lightning:layout>
       
        <!-- TOTAL RECORDS BADGES--> 
        <div class="slds-m-around_x-small">
            <lightning:badge label="{!v.TotalNumberOfRecord}" />
        </div>
        
        <!-- ERROR MESSAGE IF NOT RECORDS FOUND--> 
        <aura:if isTrue="{!v.Message}">
            <div class="slds-notify_container slds-is-relative">
                <div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
                    <div class="slds-notify__content">
                        <h2 class="slds-text-heading_small">No Records Found...</h2>
                    </div>
                </div>
            </div>
        </aura:if>
       
        <!-- TABLE CONTENT--> 
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <div class="slds-truncate" title="S.no">S.no</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Account Name">Account Name</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Type">Type</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Industry">Industry</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Fax">Fax</div>
                    </th>
                </tr>
            </thead>
            <tbody> 
                <!--### display all records of searchResult attribute by aura:iteration ###-->
                <aura:iteration items="{!v.searchResult}" var="acc" indexVar="count">
                    <tr>
                        <td>
                            <div class="slds-truncate">{!count + 1}</div>
                        </td>
                        <td>
                            <div class="slds-truncate">{!acc.Name}</div>
                        </td>
                        <td>
                            <div class="slds-truncate">{!acc.Type}</div>
                        </td>
                        <td>
                            <div class="slds-truncate">{!acc.Industry}</div>
                        </td>
                        <td>
                            <div class="slds-truncate">{!acc.Phone}</div>
                        </td>
                        <td>
                            <div class="slds-truncate">{!acc.Fax}</div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
</aura:component>
Conteroller
({
    Search: function(component, event, helper) {
        var CustomerMasterAccountName = component.find('CustomerMasterAccountName');
        var CustomerNumber = component.find('CustomerNumber');
        var Name = component.find('Name');
        var Address = component.find('Address');
        var City = component.find('City');
        var State = component.find('State');
        var ZipCode = component.find('ZipCode');
        
        var isValueMissingCMAN = searchField.get('v.CustomerMasterAccountName').valueMissing;
        var isValueMissingCMN = searchField.get('v.CustomerNumber').valueMissing;
        var isValueMissingName = searchField.get('v.Name').valueMissing;
        var isValueMissingAddress = searchField.get('v.Address').valueMissing;
        var isValueMissingCity = searchField.get('v.City').valueMissing;
        var isValueMissingState = searchField.get('v.State').valueMissing;
        var isValueMissingZipCode = searchField.get('v.ZipCode').valueMissing;
        
        // if value is missing show error message and focus on field
        if(isValueMissingCMAN) {
            CustomerMasterAccountName.showHelpMessageIfInvalid();
            CustomerMasterAccountName.focus();
        }
        else if(isValueMissingCMN){
            CustomerNumber.showHelpMessageIfInvalid();
            CustomerNumber.focus();
        }
        else if(isValueMissingName){
            Name.showHelpMessageIfInvalid();
            Name.focus();
        }
        else if(isValueMissingAddress){
            Address.showHelpMessageIfInvalid();
            Address.focus();
        }
        else if(isValueMissingCity){
            City.showHelpMessageIfInvalid();
            City.focus();
        }
        else if(isValueMissingState){
            State.showHelpMessageIfInvalid();
            State.focus();
        }
        else if(isValueMissingZipCode){
            ZipCode.showHelpMessageIfInvalid();
            ZipCode.focus();            
        }
        else{
          // else call helper function 
            helper.SearchHelper(component, event);
        }
    },
})
Helper class
({
    SearchHelper: function(component, event) {
        // show spinner message
         component.find("Id_spinner").set("v.class" , 'slds-show');
        var action = component.get("c.fetchAccount");
        action.setParams({
            'CustomerMasterAccountName': component.get("v.CustomerMasterAccountName"),
            'CustomerNumber': component.get("v.CustomerNumber"),
            'Name': component.get("v.Name"),
            'Address': component.get("v.Address"),
            'City': component.get("v.City"),
            'State': component.get("v.State"),
            'ZipCode': component.get("v.ZipCode")
        });
        action.setCallback(this, function(response) {
           // hide spinner when response coming from server 
            component.find("Id_spinner").set("v.class" , 'slds-hide');
            var state = response.getState();
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                
                // if storeResponse size is 0 ,display no record found message on screen.
                if (storeResponse.length == 0) {
                    component.set("v.Message", true);
                } else {
                    component.set("v.Message", false);
                }
                
                // set numberOfRecord attribute value with length of return value from server
                component.set("v.TotalNumberOfRecord", storeResponse.length);
                
                // set searchResult list with return value from server.
                component.set("v.searchResult", storeResponse); 
                
            }else if (state === "INCOMPLETE") {
                alert('Response is Incompleted');
            }else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        alert("Error message: " + 
                                    errors[0].message);
                    }
                } else {
                    alert("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    },
})

Getting  following Error  : Can any one help what mistake In above code.
This page has an error. You might just need to refresh it. Action failed: c:Comp_SearchContact$controller$Search [searchField is not defined] Failing descriptor: {c:Comp_SearchContact$controller$Search}
 
AnudeepAnudeep (Salesforce Developers) 
Can you define the searchField variable before using it?. For example
 
var searchField = component.find('searchField');.

Let me know if it helps