Question

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

执行即时搜索的选项，即在用户在搜索框中键入时获取结果
点击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();
    });
}

您可以在此处测试该应用：Codepen

问题：默认搜索方法是普通搜索。一旦我转动instant search on，无论当前设置是什么，该应用程序始终都会进行即时搜索。

我尝试了什么？我认为无论按钮显示的是什么设置，advancedSearch功能都会继续运行。因此，只要单击按钮，我就会在return函数中包含条件。但这并没有解决任何问题。

请注意控制台消息。我在每个函数中放置的console.log语句清楚地表明，当即时搜索按钮设置为关闭时，advancedSearch函数没有被正确触发，这就是让这种行为让我感到困惑的原因。

任何解决此问题的方法都将受到赞赏。一旦知道问题的原因，我将更改qn的标题。感谢您的耐心等待。

Answer 1

只需添加一个这样的开关变量：

var liveSearchSwitch = 0;

并进行一些简单的逻辑更改。

好的，我做到了：

https://codepen.io/mgolshan/pen/BLBEdR

您可以在此处看到与JavaScript代码的区别：

https://www.diffnow.com/?report=25eyh

如果你得不到我做的话，请告诉我

实现即时搜索功能

1 个答案: