JavaScript search form

Could anyone help me to realize this kind of interesting javascript search form?

I need this form to realize search engine on my website. So by pushing开发者_运维知识库 arrow down it has to be shown drop down list of choosing another language flag. When chosen another language flag, it needs to be replaced current language flag.

Then I want to send input data to the text field and current chosen language flag with POST method to my php script.

Extra request: can this drop down list be taken from separated JS file? And can it be controlled from JS file in order to add / remove new language flags?

If anyone has time or who is really interested realizing this kind of javascript form, please, could you help to create it?

You can use this form on your own goals!

Please, download initial files from this link http://igproject.ru/searchform/searchform.rar

Thank you in advance.

I try to summarize the things you need to do. If you accomplish each section step-by-step it shouldn't be much of a problem to implement.

1. Make the drop down list invisible.

2. Create a hidden <select> field to be passed via POST (also because of non-js users)

3. You can create an array for countries

   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 event listener for the text <input> field

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

   Do the following on every up/down keypress:

   3.1. Keep track of active element (selected by the arrow keys), add a special class like active.

   3.2. Change the flag next to the <input> field.

   3.3. Change the hidden <select> field.

Extra: Make selection circular. If the down key is pressed when the last one is active, jump to the first one. Same case for the up key and first element.

Extra2: Clean up your markup, and separate from presentation (CSS).

Extra3: You should make the whole form accessible without a mouse, so arrow keys will not only show the dropdown, but you can actually navigate with them. To close the dropdown one might use the esc button. Here is a proof of concept:

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;
}

Here's an idea. Make a table with two or three columns for the layout you want inside a div, and use a wrapper div to hide and show it and to provide proper placement. Then you can show and hide it using the button on the search bar. By using a table you can use rollover on the rows in CSS to highlight the selected row and an onclick on the to choose the row and hide the div. Also you can generate the table in your serverpage from a database allowing it to be extended later easily (for each in results).

But I agree with the comment by @aefxx, it's at least a works worth of work. An afternoon's if you're a really good coder.