JavaScript搜索表单

任何人都可以帮助我实现这种有趣的JavaScript搜索表单吗？JavaScript搜索表单

alt text

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

然后，我想通过POST方法将输入数据发送到文本字段和当前选择的语言标志到我的PHP脚本。

额外要求：这个下拉列表可以从分离的JS文件中取出吗？并且可以通过JS文件进行控制以添加/删除新的语言标志？

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

你可以使用这种形式对自己的目标！

请从这个链接http://igproject.ru/searchform/searchform.rar

感谢您提前下载初始文件。

来源

2010-11-13 ilnur777

你对此并不认真，是吗？这需要数周时间才能完成。 – aefxx 2010-11-13 23:14:58

你有没有成功解决这个问题？你还需要帮助吗？ – jcolebrand 2010-12-14 03:40:49

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

使下拉列表不可见。
创建一个隐藏<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" } 
];

事件侦听器文本<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：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; 
}

来源

2010-11-13 23:47:50 galambalazs

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

但我同意@aefxx的评论，这至少是一部值得工作的作品。一个下午，如果你是一个非常好的编码器。

来源

2010-11-14 01:21:43 jcolebrand

JavaScript搜索表单

回答

相关问题