Formulaire de recherche JavaScript

Question

Quelqu'un peut-il m'aider à réaliser ce genre de formulaire de recherche javascript intéressant?

J'ai besoin ce formulaire pour réaliser moteur de recherche sur mon site. Donc, en poussant la flèche vers le bas, il doit être montré liste déroulante de choisir un autre drapeau de la langue. Lorsque vous choisissez un autre drapeau de langue, il doit être remplacé par le drapeau de langue actuel.

Ensuite, je veux envoyer les données d'entrée au champ de texte et l'indicateur de langue choisi en cours avec la méthode POST à ​​mon script php.

Demande supplémentaire: cette liste déroulante peut-elle être extraite d'un fichier JS séparé? Et peut-il être contrôlé à partir du fichier JS afin d'ajouter/supprimer de nouveaux drapeaux de langue?

Si quelqu'un a le temps ou qui est vraiment intéressé de réaliser ce type de formulaire javascript, pourriez-vous aider à le créer?

Vous pouvez utiliser ce formulaire pour vos propres objectifs!

S'il vous plaît, télécharger les fichiers initiaux de ce lien http://igproject.ru/searchform/searchform.rar

Merci à l'avance.

Answer 1

J'essaie de résumer les choses que vous devez faire. Si vous accomplissez chaque étape étape par étape, cela ne devrait pas poser trop de problèmes.

1. Rendre la liste déroulante invisible.

2. Créer un champ <select> caché à passer via POST (aussi parce que des utilisateurs non-js)

3. Vous pouvez créer un tableau pour les pays

   var countries = [ 
       { name: "Russian", flag: "flag_ru.gif" }, 
       { name: "USA",  flag: "flag_en.gif" }, 
       { name: "Germany", flag: "flag_de.gif" }, 
       { name: "China", flag: "flag_ch.gif" } 
   ];​ 
   

4. keydown écouteur d'événement pour le texte <input> champ

   // function keydown(e) 
   e = e || window.event; 
   switch (e.keyCode) 
       // 38: up 
       // 40: down 
   

   Procédez de la manière suivante/touche enfoncée:

   3.1. Gardez une trace de l'élément actif (sélectionné par les touches fléchées), ajoutez une classe spéciale comme active.

   3.2. Changez le drapeau à côté du champ <input>.

   3.3. Changez le champ caché <select>.

supplémentaire: sélection Marque circulaire. Si vous appuyez sur la touche Bas lorsque le dernier est actif, passez au premier. Même cas pour la touche haut et le premier élément.

Extra2:Clean votre balisage, et séparé de la présentation (CSS).

EXTRA3: Vous devriez faire toute la forme accessible sans souris, si les touches fléchées montrera non seulement le menu déroulant, mais vous pouvez réellement naviguer avec eux. Pour fermer la liste déroulante, vous pouvez utiliser le bouton esc. Voici une preuve de concept de :

function handleArrowKeys(e) { 

    // capture the event 
    e = e || window.event; 

    // collect link elements 
    var dropdown = byId("dropdown"); 
    var elements = byTag("tr", dropdown); 
    var len = elements.length - 1; 
    var i = selectedIndex; 

    // handle event 
    switch (e.keyCode) { 

    case 38: // up 
     if (i <= 0) { // overflow 
     selectedIndex = len; 
     removeClass(elements[i], "active"); 
     addClass(elements[len], "active"); 
     } else { 
     removeClass(elements[i], "active"); 
     addClass(elements[i-1], "active"); 
     selectedIndex -= 1; 
     } 
     // update <select> 
     break; 

    case 40: // down 
     if (i >= len) { // overflow 
     selectedIndex = 0; 
     removeClass(elements[i], "active"); 
     addClass(elements[0], "active"); 
     } else { 
     removeClass(elements[i], "active"); 
     addClass(elements[i+1], "active"); 
     selectedIndex += 1; 
     } 
     // update <select>  
     break; 

    case 27: // esc 
     hide("dropdown"); 
     break; 

    default: return true; 
    } 
    return false; 
} 

Answer 2

est ici une idée. Faites une table avec deux ou trois colonnes pour la mise en page que vous voulez dans un div, et utilisez un div wrapper pour le cacher et le montrer et pour fournir un placement correct. Ensuite, vous pouvez l'afficher et le masquer en utilisant le bouton de la barre de recherche. En utilisant une table, vous pouvez utiliser le survol sur les lignes en CSS pour mettre en surbrillance la ligne sélectionnée et un clic sur le pour sélectionner la ligne et masquer la div. Vous pouvez également générer la table dans votre page de serveur à partir d'une base de données permettant de l'étendre plus tard facilement (pour chaque résultat).

Mais je suis d'accord avec le commentaire de @aefxx, c'est au moins une valeur de travail. Un après-midi si vous êtes un très bon codeur.