Question

有人可以帮我实现这种有趣的javascript搜索表单吗？

alt text

我需要这个表单才能在我的网站上实现搜索引擎。因此，通过向下推箭头，必须显示选择另一种语言标志的下拉列表。当选择另一种语言标志时，它需要被替换为当前语言标志。

然后我想用文本字段和当前选择的语言标志将输入数据发送到我的php脚本。

额外请求：这个下拉列表可以从分离的JS文件中获取吗？是否可以从JS文件中控制它以添加/删除新的语言标志？

如果有人有时间或者真的有兴趣实现这种javascript表单，请帮助创建它吗？

您可以根据自己的目标使用此表单！

请从此链接下载初始文件http://igproject.ru/searchform/searchform.rar

提前谢谢。

Answer 1

我试着总结一下你需要做的事情。如果逐步完成每个部分，那么实现它应该不是一个大问题。

使下拉列表不可见。
创建一个隐藏的<select>字段，通过POST传递（也是因为非js用户）

您可以为国家/地区创建数组

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

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>字段。

额外：选择循环。如果在最后一个激活时按下向下键，则跳转到第一个键。 up键和第一个元素的情况相同。

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的评论，这至少是值得一试的作品。如果你是一个非常优秀的程序员，那将是一个下午。

JavaScript搜索表单

2 个答案: