使文本框像下拉框一樣工作

我想複製我有一個下拉框允許用戶選擇標籤，然後返回與此術語相關的文章的功能。使文本框像下拉框一樣工作

該文本框需要接受搜索詞並以相同的方式工作。我嘗試了所有我能想到的，但我得到零結果。

要複製該行爲，請從下拉框中選擇一項並返回文章。然後嘗試在搜索框中輸入相同的字詞，並且不返回任何文章。

任何想法，爲什麼？下面是該網站：

http://www.api.jonathanlyon.com/getpocket/view.html

來源

2013-01-21 Jonathan Lyon

添加'返回false;'的'validateForm'功能 – PitaJ

我們需要看到的結束一些代碼。你可以發佈一些嗎？看起來文本框正確地傳遞了變量，但是從那裏會發生什麼？ – Charles

@PitaJ是對的。您的代碼無法停止提交操作，因此網頁將被刷新，這就是爲什麼沒有搜索結果。 – hit1205

一個解決辦法是改變你的搜索框代碼是這樣的：

<form name="searchform" > 
    <input type="text" name="searchterm"> 
    <input type="button" value="search" onclick="validateForm()"> 
</form>

既然你是不是真的提交表單，不想重裝一個頁面，您可以只使用button的click事件，而不是form的submit事件。

如果您希望在按下Enter按鈕時獲得文章，可以採用以下方法之一（可能有更好的方法，我現在沒有想到......）。您可以使用事件來運行將測試Enter按鈕的功能。當它找到它時，它會調用validateForm。此功能添加到您的腳本：

function init(){ 
    document.getElementById("searchterm").addEventListener(
     "keydown", keydown 
    ); 
    function keydown(e){ 

     if(e.keyIdentifier == "Enter"){ 
      validateForm(); 
     } 
    } 
}

，你的身體標記改成這樣：

<body onload="init();">

下將事件偵聽器textbox一旦頁面加載。

警告之一：我正在運行Chrome的Linux筆記本電腦上測試此操作。我不知道Mac是否撥打Enter密鑰Return，我不知道.keyIdentifier是否是跨瀏覽器兼容的。這是你需要考慮的事情，但這應該讓你開始。

來源

2013-01-21 18:05:01

完美謝謝！ –

是否可以通過在輸入值後按回車來使文本框工作以及按下搜索按鈕？ –

我推薦使用jQuery UI組合框。它允許你輸入值，自動完成和下拉功能。這需要一些時間來熟悉jQuery用戶界面，但它的強大，適合幾乎所有的解決方案有關的用戶交互：

jQuery UI Combobox demo

來源

2013-01-21 18:09:22

使文本框像下拉框一樣工作

回答

相關問題