Tentative d'exécution de deux requêtes de saisie semi-automatique sur une page, les deux ne fonctionnant pas ensemble

Je tente d'exécuter deux jqueries de saisie semi-automatique sur une page à partir de deux zones de saisie. Sur leur propre, ils fonctionnent bien, mais ensemble, ni travailler.Tentative d'exécution de deux requêtes de saisie semi-automatique sur une page, les deux ne fonctionnant pas ensemble

<html> 
<head> 
    <title>WWW</title> 
    <link href="css/page.css" rel="stylesheet" type="text/css" /> 
    <link href="css/div-forms.css" rel="stylesheet" type="text/css" /> 
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(document).ready(function() { 
     src = 'actions/auto-complete-makes.asp'; 
     $("#id-make").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
      url: src, 
      dataType: "json", 
      data: { 
       term: request.term, 
      }, 
      success: function(data) { 
       response(data); 
      } 
      }); 
     }, 
     min_length: 2, 
     }); 
    }); 

    $(document).ready(function() { 
     src = 'actions/auto-complete-models.asp'; 
     $("#id-model").autocomplete({ 
     source: function(request, response) { 
      $.ajax({ 
      url: src, 
      dataType: "json", 
      data: { 
       term: request.term, 
       make: $('#id-make').val() 
      }, 
      success: function(data) { 
       response(data); 
      } 
      }); 
     }, 
     min_length: 2, 
     }); 
    }); 
    </script> 
</head> 

<body> 
    <div class="div-form-title"> 
    <span class="page-title"><b>New I.T. Asset Form</b></span> 
    </div> 
    <form action="actions/add-it-asset-to-db.asp" name="frmITasset" id="id-frmNewAsset" method="post" onSubmit="return validateNewAsset();"> 
    <tr> 
     <span class="field-name top required">Make</span><br /> 
     <input type="text" class="form-box-wide" id="id-make" name="frm-make" maxlength="30" autocomplete="off" /><br /> 
     <span class="field-name required">Model</span><br /> 
     <input type="text" class="form-box-wide" id="id-model" name="frm-model" maxlength="30" autocomplete="off" /><br /> 
     <input type="submit" value="Add Asset" id="id-form-submit" class="form-bttnStandard" /> 
    </tr> 
    </form> 
    </div> 
</body> 
</html>

Quand ils sont tous les deux ensemble, que # id-modèle fonctionne, mais sur son propre, # id-make fonctionne très bien.

Les pointeurs s'il vous plaît, car je ne peux pas comprendre ce qui ne va pas.

Source

2017-08-10 John Moore

Pouvez-vous s'il vous plaît vérifier la console pour les erreurs et mentionné ici? – Kashyap

Deux gestionnaires distincts 'document.ready' qui peuvent s'exécuter dans n'importe quel ordre, et une variable' src' portée globalement qui doit contenir simultanément deux valeurs différentes? À tout le moins, vous devriez combiner ces gestionnaires et juste coder en dur cette valeur 'src' dans le seul endroit où vous l'utilisez. – David

Merci David, mais comment ferais-je cela? très nouveau à cela. Cheers –

Un emballage «prêt» est suffisant ... Ce n'est pas le problème.
Mais deux variables "src" sont requises pour deux valeurs.

Étant donné que l'auto-complétion se produit lorsque l'utilisateur tape quelque chose dans ...
Les deux URL sont nécessaires. Vous ne pouvez pas utiliser la même variable.

$(document).ready(function() { 
    src1 = 'actions/auto-complete-makes.asp'; 

    $("#id-make").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: src1, 
     dataType: "json", 
     data: { 
      term: request.term, 
     }, 
     success: function(data) { 
      response(data); 
     } 
     }); 
    }, 
    min_length: 2, 
    }); 

    src2 = 'actions/auto-complete-models.asp'; 

    $("#id-model").autocomplete({ 
    source: function(request, response) { 
     $.ajax({ 
     url: src2, 
     dataType: "json", 
     data: { 
      term: request.term, 
      make: $('#id-make').val() 
     }, 
     success: function(data) { 
      response(data); 
     } 
     }); 
    }, 
    min_length: 2, 
    }); 
}); // ready

Source

2017-08-10 12:33:59

Tentative d'exécution de deux requêtes de saisie semi-automatique sur une page, les deux ne fonctionnant pas ensemble

Répondre

Questions connexes