javascript - 为搜索功能 jquery 追加输入文本字段

Question

我现在有以下 jquery 代码。这最终将成为一个搜索功能，现在我得到了动画，但我还没有向该功能添加一个输入文本字段，我可以将其用于搜索功能的 C# 代码。它应该在边框展开后出现，并在用户单击 html 时消失，就像脚本对边框所做的那样。

    $(function () {
        var search = $("#search");

        search.click(function () {
            search.attr("src", "Icons/magnifier.png").css({ "border": "2px", "border-style": "solid", "border-color": "#808080", "padding-left": "130px", "transition": "all 500ms" });
        });
        $('html').click(function (e) {
            if (e.target.id != 'search') {
                $("#search").attr("src", "Icons/magnifier2.png");
                $("#search").removeAttr('style');;
            }
        });
    })

我想我必须创建一个追加函数，但我仍然不确定如何创建它，以便当用户按 Enter 时它会触发搜索功能。

但是现在，我只想创建文本字段，以便它可以在进一步的过程中使用。

https://jsfiddle.net/ymzzpLdd/

Answer 1

您可以在 html 中创建文本框并使用 jQuery 显示/隐藏它，也可以动态创建文本框元素，然后将其附加到搜索表单容器。

$("#searchContainer").append('<input id="searchBox" name="txtSearch" type="text">');