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搜索表單

回答

相關問題