Question

我需要一些关于以下代码的帮助。我调试了ajaxcomplete以分别适应后来的版本1.9.1。当我单独使用Ajaxcomple例程时它确实很有效。当我单独使用Autocomple例程时，一切都很完美。当两者在一起时，看起来像AjaxComplete不会触发。

<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

尝试使用自动填充input事件触发change：

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

ALSO：

确保url: "check.php",功能中.ajax的路径正确无误。如果它不在根目录下，请尝试url: "/check.php",

Ajax完成不适用于自动完成

1 个答案: