Question

我正在尝试复制我在下拉框中的功能，该框允许用户选择标签，然后返回与此术语相关的文章，。

文本框需要接受搜索词并以相同的方式工作。我已经尝试了所有我能想到的但是我的结果为零。

要复制该行为，请从下拉框中选择一个项目，它将返回文章。然后尝试在搜索框中键入相同的术语，它不会返回任何文章。

知道为什么吗？这是网站：

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

Answer 1

一种解决方案是将搜索框代码更改为以下内容：

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

由于您实际上并未提交表单而且不想重新加载页面，因此您可以使用click中的button事件而不是submit事件form。

如果你想在点击Enter按钮时得到文章，这里有一种方法（可能有更好的方法，我现在没想到......）。您可以使用keydown事件来运行将测试Enter按钮的函数。找到后，它会调用validateForm。将此功能添加到您的脚本中：

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

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

并将您的正文标记更改为：

<body onload="init();">

一旦页面加载，就会将keydown事件监听器附加到textbox。

警告提示：我正在运行Chrome的Linux笔记本电脑上进行测试。我不知道Mac是否会调用Enter密钥Return而我不知道.keyIdentifier是否与浏览器兼容。这是你需要研究的问题，但这应该让你开始。

Answer 2

我建议使用jQuery UI组合框。它允许您键入值，自动完成和下拉功能。需要一些时间才能熟悉jQuery UI，但它的健壮性几乎适用于与用户交互相关的所有解决方案：

jQuery UI Combobox demo

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

2 个答案: