0

Visualforce component :

<apex:component controller="AutoCompleteV2_Con" selfClosing="true">
    <apex:attribute name="SObject" description="SOQL Object to query"
        type="String" assignTo="{!sObjVal}" required="true" />
    <apex:attribute name="labelField"
        description="API Name of Field to display for label" type="String"
        required="true" assignTo="{!labelFieldVar}"/>
    <apex:attribute name="valueField"
        description="API Name of Field to display for value that is passed to the targetField"
        type="String" required="true" assignTo="{!valueFieldVar}"/>
    <apex:attribute name="targetField"
        description="Field of current object that will hold the selection."
        type="Object" assignTo="{!targetFieldVar}"/>
    <apex:attribute name="inputFieldId"
        description="Id of the field where the value will copied[Not generally required, used when you need to copy value to a field using js]"
        type="String" />
     <apex:attribute name="importJquery"
        description="Assign false if you dont want to jquery files"
        type="Boolean" default="true" />
    <apex:attribute name="syncManualEntry"
        description="Allow manual entry of data from autocomplete component."
        type="Boolean" default="true" />
    <apex:attribute name="allowClear" description="Set true to give user a option to clear existing value" type="Boolean" default="true"/>

    <apex:attribute name="Style" description="style for the input component" type="String"/>
    <!--Required js files-->
    <apex:outputPanel rendered="{!importJquery}">
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
    </apex:outputPanel>
        <apex:includeScript value="{!URLFOR($Resource.select2, 'select2/select2.js')}"/>
        <apex:stylesheet value="{!URLFOR($Resource.select2, 'select2/select2.css')}"/>
    <script>
        var v2{!randomJsIden}

        var prevVal{!randomJsIden};
        function autocompleteV2{!randomJsIden}(){
             var v2=this;
             jQuery(function($){ //on document.ready
                    v2.init($)
             });
        }

        autocompleteV2{!randomJsIden}.prototype={
            init : function($){

                       var $elem = $( ".auto{!randomJsIden}" ).select2({
                           minimumInputLength: 1,
                           placeholder: "No value selected",
                           allowClear : {!allowClear},
                           query: function (query) {
                               queryData{!randomJsIden}(query);

                           },
                           createSearchChoice:function(term, data) {
                                if({!syncManualEntry} == true){
                                    return {id:term, text:term};
                                }
                            }
                       });

                       $elem.on("select2-selecting", function(e) {

                           $('.hiddenField{!randomJsIden}').val(e.val);
                       });

                       $elem.on("select2-removed", function(e) {
                           $('.hiddenField{!randomJsIden}').val('');
                       });



                       if('{!cacheField}' !=''){
                           $elem.select2("data", {id: "{!targetFieldVar}", text: "{!cacheField}"})  
                       }  

                    },

            triggerSearch :function(val){

                                if(prevVal{!randomJsIden} != val){
                                    $=jQuery;
                                    prevVal{!randomJsIden} = val;
                                    var select = $('input.auto{!randomJsIden}');          
                                    var search = $('.select2-input')
                                    select.select2('open');
                                    search.val(val);

                                    search.trigger("input");
                                }
                            }
        }





         /*
        *This method queries data according to the passed parameter
        *and populates the combobox accordingly
        ***/    
        function queryData{!randomJsIden}(query){

           Visualforce.remoting.Manager.invokeAction(
                     '{!$RemoteAction.AutoCompleteV2_Con.getData}','{!sObjVal}','{!labelFieldVar}','{!valueFieldVar}',query.term,
                     function(result, event){

                         //if success
                         if(event.status){ 
                             var data = {results: []}
                             data.results = result;                            
                             query.callback( data);                           
                         }
                         else{
                              alert('Invalid Field/Object API Name : '+event.message);
                         }

                     }, 
                      {escape: true}
                );
            }  


    </script>

    <apex:inputText style="{!Style}" styleClass="auto{!randomJsIden}" value="{!cacheField}" />

    <apex:outputPanel id="hiddenPanel">
        <apex:inputText value="{!targetField}" id="hiddenField" 
            styleClass="hiddenField{!randomJsIden}" style="display:none"/>
    </apex:outputPanel>
    <script>v2{!randomJsIden} = new autocompleteV2{!randomJsIden}({});</script>
</apex:component>

Visualforce page :

<apex:page standardController="account" id="page">
    <apex:includeScript value="//cdn.jsdelivr.net/jquery/1.7/jquery.min.js" />
    <apex:includeScript value="//cdn.jsdelivr.net/jquery.colresizable/1.3/colResizable.min.js" />
    <apex:includeScript value="{!URLFOR($Resource.JqueryA, 'js/jquery-ui-1.8.16.custom.min.js')}" />
    <!-- <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
            <apex:includeScript value="{!URLFOR($Resource.select2, 'select2/select2.js')}"/>-->

    <apex:form id="form1">
        <br />
        <apex:outputpanel id="counter1">
            <apex:pageBlock id="block1">
                <apex:pageBlockSection id="section1">

                    <c:AutoCompleteV2 allowClear="true" id="d" importJquery="true" labelField="name" SObject="account" valuefield="name" targetField="{!account.name}" />
                </apex:pageBlockSection>
            </apex:pageBlock>
            <b><a href="#" onClick="clearValue()"><apex:commandButton value="Reset" onclick="this.form.reset();return true;" rerender="counter1"/></a> </b>
        </apex:outputpanel>
    </apex:form>
    <script type="text/javascript">
        function clearValue() {
            alert($("input[id$='d']").val());

        }
    </script>
</apex:page>

I have tried all possible ways in which i can do .But cant to able clear that value with reset button.

I am getting value to targetfield using autocomplete v2 component .i can able to alert the value .but i cant able to clear that value using reset .Please let me know how i can clear this value using js or jquery .

Thanks in Advance .

  • I think you need remove value from hiddenField field.... not from d .. – Ratan Paul Mar 29 '16 at 6:05
  • i tried this document.getElementById('{!$Component.c:AutoCompleteV2.hiddenfield}').value = ''; – Teja Mar 29 '16 at 6:08
  • but not working – Teja Mar 29 '16 at 6:09
  • Did you try $("input[id$='hiddenField']").val("") ? – Ashwani Mar 29 '16 at 7:48
  • @Ashwani no not working – Teja Mar 29 '16 at 8:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.