Javascript 实现即时搜索功能

我想在我的wikipedia应用程序中实现一个功能，它为用户提供两个选项：

• 进行即时搜索的选项，即当用户在搜索框中键入时获取结果
• 点击

  Enter

  时执行正常搜索的选项。我有一个按钮来切换该功能

下面是JS代码：

var btn = $(".autocomplete-button .btn")
btn.click(searchOptions);

function searchOptions() {

    btn.html() === "Instant Results Off" ?
        btn.html("Instant Results On") :
        btn.html("Instant Results Off");

    if (btn.html() === "Instant Results On") {
        advancedSearch();
        onSubmit();
    } else {
        onSubmit();
    }
};

function advancedSearch() {

    $("#wiki-search").keyup(function (e) {
        getArticles();
    });
}

onSubmit();

function onSubmit() {

    $(".search-form").submit(function (e) {
        e.preventDefault()
        getArticles();
    });
}

您可以在此处测试应用程序：

问题：默认搜索方法是普通搜索。一旦我打开

即时搜索

，无论当前设置如何，应用程序都会进行即时搜索

我尝试了什么？我假设无论按钮显示什么设置，

advancedSearch

功能都会继续运行。因此，每当单击按钮时，我都包含了一个返回函数的条件。但这并没有解决任何问题

请注意控制台消息。我在每个函数中放置的console.log语句清楚地表明，当instant search（即时搜索）按钮设置为off（关闭）时，

advancedSearch

函数没有被正确触发，这使我对这种行为感到困惑

---

对此问题的任何解决方案都将不胜感激。一旦知道问题的原因，我将更改qn的标题。感谢您的耐心。

只需添加如下开关变量：

var liveSearchSwitch = 0;

然后，进行一些简单的逻辑更改

好的，我做到了：

您可以在这里看到JavaScript代码与我的代码的区别：

---

如果您无法了解我所做的，请告诉我

谢谢。效果很好。在我的原始代码中，当即时搜索关闭时，函数advancedSearch（）没有被触发。那么为什么在该函数中添加条件

if（liveSearchSwitch）{getArticles（）；}

可以解决这个问题呢？@snow Cool。很高兴听到这个消息，如果你不介意的话，我的评论中有一个问题是关于我没有得到关于你的changes@snow，您有一个键控事件侦听器。您需要一个逻辑来知道在何种情况下应该在keyup上启动getArticles（）。当您的设置处于禁用状态时，它不应调用函数getArticles（）