Comment réaliser cette structure pour une fonctionnalité de saisie semi-automatique?

Question

Voici, plus ou moins, le flux de travail général:

1. Les types d'utilisateur quelque chose sur un élément d'entrée;
2. Onkeyup, il va récupérer les valeurs de notre script backend, et en choisir un.
3. Après avoir choisi, onblur, nous allons saisir cette valeur et l'utiliser pour interroger la base de données pour certaines données,
4. Avec les données retournées par la base de données, il exécutera d'autres commandes sur un serveur externe.
5. Ensuite, il saisira ces valeurs et les utilisera pour remplir certains éléments d'entrée qui attendent d'être renseignés, une fois que l'utilisateur a choisi l'option de l'élément de saisie semi-automatique.
6. Avec ces données en place, l'utilisateur peut alors modifier les valeurs, et appuyez sur pour sauver une autre « aventure ajax ... »

Donc, ici, nous sommes sur les étapes 1 et 2 uniquement (donc Je crois):

C'est ce que j'ai pu accomplir avec l'aide de this article. Que j'essaie de comprendre et d'adapter.

//1) WHEN WILL verificaInput BE CALLED? 


$(document).ready(function verificaInput(inputString) { 
    if (inputString.length == 0) { 
     $('#sugestoes').hide(); 
    } else { 

     $.post('modelAutocompleteTeste.php', 
        {nomeDominio: $('#nome-dominio').val()}, 

      function(dadosResposta){ 

       if(inputString.length > 3) { 
        $('#sugestoes').show(); 

        //2) WHAT SHOULD I PUT HERE? 
       } 
      }, 
     "json" 
     ); 
    } 
} 

À propos de 1: Nous ne devons PAS utiliser les appels js en ligne. Où devrions-nous appeler/utiliser les événements comme onkeyup et onblur etc?

Environ 2: voir la source imprimer?

function(dadosResposta){ 

Cela contient la réponse de notre script côté serveur, si la chaîne d'entrée est supérieure à 3, il montrera nos suggestions. Maintenant, à l'intérieur de cette suggestion que je vais devoir remplir certains éléments (<li>) contenant toutes les données renvoyées au format JSON de notre script côté serveur (il est PHP - en utilisant json_encode())

Si oui, est-ce la place à boucle sur et créer les éléments li

Plus de réponses, je voudrais demander quelques conseils,?. Je suis perdu et coincé

Answer 1

pour vous aider à démarrer ...

$(document).ready(function() { 
    $('#your_input_field').bind('keyup', function() { 
     var theVal = $(this).val(); 
     if (theVal.length > 3) { 
      verificaInput(theVal); 
     } else { 
      $('#sugestoes').hide(); 
     } 
    }); 
}); 

function verificaInput(inputString) { 
    if (inputString.length == 0) {// this will never be true 
     $('#sugestoes').hide();// so this will never be necessary 
    } else { 
     $.post('modelAutocompleteTeste.php', 
      {nomeDominio: $('#nome-dominio').val()}, 
      function(dadosResposta){ 
       if(inputString.length > 3) { 
        $('#sugestoes').show(); 
        //2 here you should include a function name that will allow interaction with the provided list 
       } 
      }, 
      "json" 
     ); 
    } 
}