Форма поиска JavaScript

Question

Может ли кто-нибудь помочь мне реализовать такую ​​интересную форму поиска javascript?

Мне нужна эта форма, чтобы реализовать поисковую систему на моем сайте. Таким образом, нажав стрелку вниз, нужно показать выпадающий список выбора другого языка. Когда выбран другой языковой флаг, его необходимо заменить текущим языковым флагом.

Затем я хочу отправить входные данные в текстовое поле и текущий флаг выбранного языка с методом POST в мой php-скрипт.

Дополнительный запрос: можно ли взять этот выпадающий список из отдельного файла JS? И можно ли управлять им из файла JS для добавления / удаления новых языковых флагов?

Если у кого-то есть время или кто действительно заинтересован в реализации такой формы javascript, не могли бы вы помочь ее создать?

Вы можете использовать эту форму для своих целей!

Пожалуйста, скачайте исходные файлы по этой ссылке http://igproject.ru/searchform/searchform.rar

Заранее спасибо.

Answer 1

Я пытаюсь обобщить то, что вам нужно сделать.Если вы выполняете каждый раздел шаг за шагом, это не должно быть большой проблемой для реализации.

1. Сделайте раскрывающийся список невидимым.

2. Создание скрытого <select> поля для передачи через POST (также из-за пользователей не-js)

3. Вы можете создать массив для стран

   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 прослушиватель событий для текста <input> поле

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

   При каждом нажатии клавиш вверх / вниз выполните следующие действия:

   3.1.Отслеживайте активный элемент (выбранный с помощью клавиш со стрелками), добавьте специальный класс, например active.

   3.2.Измените флаг рядом с полем <input>.

   3.3.Измените скрытое поле <select>.

Дополнительно: Сделайте выбор Круглый .Если клавиша «вниз» нажата, когда активна последняя, ​​перейдите к первой.То же самое относится к клавише «вверх» и первому элементу.

Extra2: Очистите вашу разметку и отделите от представления (CSS).

Extra3: Вы должны сделать всю форму доступной без мыши, чтобы клавиши со стрелками не только отображали выпадающий список, но и могли фактически перемещаться с ними.Чтобы закрыть выпадающий список, можно использовать кнопку esc.Вот подтверждение концепции :

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

Вот идея. Создайте таблицу с двумя или тремя столбцами для макета, который вы хотите внутри div, и используйте div-обертку, чтобы скрыть и показать его и обеспечить правильное размещение. Затем вы можете показать и скрыть его с помощью кнопки на панели поиска. Используя таблицу, вы можете использовать ролловер для строк в CSS, чтобы выделить выбранную строку, и щелкнуть мышью по кнопке, чтобы выбрать строку и скрыть div. Кроме того, вы можете сгенерировать таблицу на своей серверной странице из базы данных, что позволит легко расширить ее позже (для каждого результата).

Но я согласен с комментарием @aefxx, по крайней мере, это стоит трудов. День, если вы действительно хороший кодер.