Ajax完成不适用于自动完成

Question

I need some help on the code below. I debugged the ajaxcomplete to fit the later version 1.9.1 separatly. It does work when I use the Ajaxcomple routine alone everything is perfect.When I use the Autocomple routine alone everything is perfect. When both are together it does look like the AjaxComplete don't trigger.

<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 
<script src="gen_validatorv4.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js">    
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
<SCRIPT type="text/javascript">
pic1 = new Image(16, 16); 
pic1.src = "loader.gif";
$(document).ready(function(){
$("#username").change(function() { 
var usr = $("#username").val();
if(usr.length >= 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Verification of disponibility...');
    $.ajax({  
    type: "POST",  
    url: "check.php",  
    data: "username="+ usr,  
    success: function(msg){  
      $(document).ajaxComplete(function(event, request, settings){ 
    if(msg == 'OK')
{ 
    $("#username").removeClass('object_error'); // if necessary
    $("#username").addClass("object_ok");
    $("#status").html('&nbsp;<img src="tick.gif" align="absmiddle">');
}  
else  
{  
    $("#username").removeClass('object_ok'); // if necessary
    $("#username").addClass("object_error");
    $(this).html(msg);
}  
  });
 }    
  }); 
}
else
        {
    $("#status").html('<font color="red">Email should be less than <strong>4</strong> characters.</font>');
    $("#username").removeClass('object_ok'); // if necessary
    $("#username").addClass("object_error");
    }

});
});
</SCRIPT>

    <form action='' method='post'>
  <table width="700" border="0"> 
    <tr>
      <td width="200"><div align="right">Courriel*:&nbsp;</div></td>
      <td width="100"><input id="username" size="20" type="text" name="Courriel"></td>
      <td width="400" align="left"><div id="status"></div></td>
    </tr> 
    </table>
        <p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
    </form>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">   </script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>    
<script type="text/javascript">
$(function() {

    //autocomplete
    $(".auto").autocomplete({
        selectFirst:true,
        source: "Search_bon.php",
        delay: 0,
        autoFocus: true,
        minLength: 1
    });                

});
</script>
</body>

Answer 1

Try triggering the input with the autocomplete change event:

//autocomplete
$(".auto").autocomplete({
    selectFirst:true,
    source: "Search_bon.php",
    delay: 0,
    autoFocus: true,
    minLength: 1,
    change: function (event, ui){
        $("#username").trigger("change");
   }
}); 

ALSO:

Make sure the path to url: "check.php", is correct in the .ajax function. If it's off the root, try url: "/check.php",