I developed an auto complete field and i want to save that field in controller.how can i do that?

Apex Class:

public with sharing class AppreciationController {

    public List<Appreciation__c> EpmList{get; set;}
    ApexPages.StandardController sc;
    public Appreciation__c objAppreciation{get;set;}
    public String strThumbs{get;set;}

    public AppreciationController(ApexPages.StandardController controller) 
    {
        sc=controller;
        EpmList = new List<Appreciation__c>();
        objAppreciation=new Appreciation__c();
        EpmList = [Select Description__c,Employee__c, Project__c, Type__c from Appreciation__c]; 
        strThumbs='';
    }

    public PageReference ThumbsUpAction()
    {
        objAppreciation.Type__c='Thumbs Up';
        return null;
    }

    public PageReference ThumbsDownAction()
    {
        objAppreciation.Type__c='Thumbs Down';
        return null;
    }

    public void SaveAppreciation()
    {
        insert objAppreciation;
    }


}

Visualforce pages:

<apex:page standardController="Appreciation__c" extensions="AppreciationController" docType="HTML-5.0" >
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script>
            $(function() 
            {
                var availableTags = ["ActionScript","AppleScript","Asp"];
                $( "#tags" ).autocomplete({source: availableTags}); 
            });
        </script>
<apex:form > 
<apex:pageBlock >
    <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!SaveAppreciation}"/>
        <apex:commandButton value="Cancel" action="{!cancel}"/>
    </apex:pageBlockButtons>

    <apex:pageBlockSection title="Employee Appreciation" columns="1" collapsible="false">
        <div class="ui-widget">
              <label for="tags">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   Employee    &nbsp;&nbsp;&nbsp; </label>
              <input id="tags"/>
        </div>


        <apex:inputfield value="{!objAppreciation.Project__c}"/>
        <apex:inputfield value="{!objAppreciation.Description__c}"/>
        <apex:pageBlockSectionItem >
            <apex:commandlink action="{!ThumbsUpAction}" style="float:center;" rerender="Panel1" >
                <apex:image id="ThumbsUpImage" value="{!$Resource.ThumbsUp}" width="50" height="50"/>
            </apex:commandlink>

            <apex:commandlink action="{!ThumbsDownAction}" style="float:center;" rerender="Panel1">
                <apex:image id="ThumbsDownImage" value="{!$Resource.ThumbsDown}" width="50" height="50"/>
            </apex:commandlink>
        </apex:pageBlockSectionItem>

       <apex:outputPanel id="Panel1">
           <apex:outputField value="{!objAppreciation.Type__c}"/>
       </apex:outputPanel>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>

UPDATE – it’s working…

j$(document).ready(function(){
              j$(".apexemployeeautocomplete").autocomplete({
                  source : apexEmployeeList
           });  
            j$("#button").click(function(){
              alert('somevalue');
             // var obj = document.getElementById("{!$Component.form.panel.apexemployeeautocomplete}");
              alert(obj);
              });   

          });   

Answer

In your controller, introduce
public String autoCompleteText {get;set;}

In the VF page, instead of <input id="tags"/>
use
<apex:inputText id="tags" value="{!autoCompleteText}" />

For jQuery selector $("#tags") won’t work here. So replace it with $("id$=['tags']")

Attribution
Source : Link , Question Author : Harshal K , Answer Author : Saket Joshi

Leave a Comment