Check if input field cleared and then call an apex function

Question

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> 

Answer 1

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.