4

I have below auto complete Javascript code which works fine for my input text fields. But when I clear the searched value I am not getting search results as expected.

Javascript Code

 j$(document).ready(function(){

    j$(".apexaccountautocomplete").autocomplete({

        source : apexCIList,
       select: function(event, ui){ this.value = ui.item.value; jsApplyFilter("'" + ui.item.value + "'"); }

   });  

   j$(".apexRepautocomplete").autocomplete({

        source : apexRepList,
       select: function(event, ui){ this.value = ui.item.value; jsApplyFilter("'" + ui.item.value + "'"); }
   });  

    j$(".apexCITautocomplete").autocomplete({
                      source : apexCITList,
                      select: function(event, ui){ this.value = ui.item.value; jsApplyFilter("'" + ui.item.value + "'"); }

               }); 
  });  

I do understand this is my exact scenario but when i try implement the solution mentioned, even my autocomplete function seems not working.

[https://stackoverflow.com/questions/13922993/jquery-ui-autocomplete-how-to-tell-if-the-field-has-been-cleared][1]

If the field values has been cleared I just need call jsApplyFilter("''");

Here Applyfilter is an apex function that calls a controller method which is working absolutely fine.

Here I have three input text boxes in my page. Please find them here.

<apex:pageblockSectionItem > 
       <apex:outputText rendered="{!userType == 'Admin' || userType == 'HomeOffice' || userType == 'Field'}">Compliance Incident Name</apex:outputText>
            <apex:inputText styleClass="apexaccountautocomplete" value="{!selectedCI}"  id="CI">
     <!-- <apex:actionSupport event="onchange" action="{!applyfiler}" rerender="pb"/>     -->
     </apex:inputtext> 
    </apex:pageblockSectionItem>

 <apex:pageblockSectionItem > 
       <apex:outputText rendered="{!userType == 'Admin' || userType == 'HomeOffice' || userType == 'Field'}">Representative Name</apex:outputText>
            <apex:inputText styleClass="apexRepautocomplete" value="{!selectedRep}"  id="Rep">
 <!-- <apex:actionSupport event="onchange" action="{!applyfiler}" rerender="pb"/>    -->
     </apex:inputtext> 
    </apex:pageblockSectionItem> 

<apex:pageblockSectionItem > 
       <apex:outputText rendered="{!userType == 'Admin' || userType == 'HomeOffice' || userType == 'Field'}">Compliance Incident Transaction Name</apex:outputText>
            <apex:inputText styleClass="apexCITautocomplete" value="{!selectedCIT}"  id="CIT">
<!-- <apex:actionSupport event="onchange" action="{!applyfiler}" rerender="pb"/>  -->
     </apex:inputtext> 
    </apex:pageblockSectionItem> 
  • from your inputText field call different method and then call the apex function. – Tushar Sharma Jan 10 '17 at 7:47
  • @TusharSharma I need to do something like this. But it's not working. j$(".apexaccountautocomplete").autocomplete({ source : apexCIList, change: function(event, ui){ if (ui.item) { this.value = ui.item.value; jsApplyFilter("'" + ui.item.value + "'"); } else {jsApplyFilter("''");} } }); – Testing_SFDC Jan 10 '17 at 7:48
  • It simply stops selecting the value from dropdown – Testing_SFDC Jan 10 '17 at 7:49
  • Check my answer. – Tushar Sharma Jan 10 '17 at 7:50
  • Did you try to add a console log to check if your else condition is reached? – Martin Lezer Jan 10 '17 at 8:00
2

You can write different handle for this situation. You can do something like

j$(document).ready(function(){

    j$(".apexaccountautocomplete").focusout(function() {
        if (j$(this).val() == '') {
            jsApplyFilter("''")
        }
    });

    j$(".apexRepautocomplete").focusout(function() {
        if (j$(this).val() == '') {
            jsApplyFilter("''")
        }
    });

    j$(".apexCITautocomplete").focusout(function() {
        if (j$(this).val() == '') {
            jsApplyFilter("''")
        }
    });

   j$(".apexaccountautocomplete").autocomplete({

Once focus is out from text field it will check and if its value is blank then call the actionfunction.

PS: Every time user start typing and then clear the value and leave then actionfunction will be called. SO if you are performing some DML inside your method then you need to take care of that.

Update: As you are using apex:tag so there Id changed during runtime so you need dynamic Id selector Here. THis is a working example tested in my org.

$("[id$='CI']").focusout(function() {
       console.log('----------------------');
        if ($(this).val() == '') {
            jsApplyFilter("''");
        }
    });

or you can try what Martin Suggested.

| improve this answer | |
  • where can I put this in my page in document ready? – Testing_SFDC Jan 10 '17 at 7:56
  • @SFDC_Learner yes and don't forget to change Id as well. – Tushar Sharma Jan 10 '17 at 7:57
  • Please let me know the changes in my document ready. I am new to this JQuery world. – Testing_SFDC Jan 10 '17 at 7:57
  • @SFDC_Learner check my updated answer. – Tushar Sharma Jan 10 '17 at 7:58
  • 1
    Great Tushar Thanks!! I am learning to debug in inspect element and JQuery. Hope I can be in a workable state soon if not pro. :D – Testing_SFDC Jan 10 '17 at 10:22

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.