Форма поиска 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 
   

   Сделайте следующее на каждом этапе/down:

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

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

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

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

Extra2:Clean вверх разметка, и отдельно от презентации (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, чтобы выделить выбранную строку и кнопку onclick, чтобы выбрать строку и скрыть div. Также вы можете сгенерировать таблицу на своей серверной странице из базы данных, чтобы она была легко расширена позже (для каждого в результатах).

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