JavaScript 搜索表单答案

【问题标题】：JavaScript search formJavaScript 搜索表单
【发布时间】：2011-05-09 16:20:40
【问题描述】：

谁能帮我实现这种有趣的 javascript 搜索表单？

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

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

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

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

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

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

提前谢谢你。

【问题讨论】：

你不是认真的，是吗？完成这项工作需要一周的时间。
你有没有成功解决过这个问题？您还需要这方面的帮助吗？

标签： javascript search forms

【解决方案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> 字段。

额外：选择圆形。如果在最后一个处于活动状态时按下向下键，则跳转到第一个。向上键和第一个元素的大小写相同。

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

【讨论】：

【解决方案2】：

这是一个想法。为您想要在 div 中的布局制作一个包含两列或三列的表格，并使用包装器 div 隐藏和显示它并提供适当的位置。然后您可以使用搜索栏上的按钮显示和隐藏它。通过使用表格，您可以在 CSS 中的行上使用翻转来突出显示选定的行，并单击 onclick 来选择行并隐藏 div。您还可以从数据库中生成服务器页面中的表，以便以后轻松扩展它（针对每个结果）。

但我同意@aefxx 的评论，这至少是一部值得工作的作品。如果你是一个非常优秀的程序员，一个下午的时间。

【讨论】：