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');;
            }
        });
    })

我想我必须制作一个追加功能，但我仍然不确定如何以这样的方式创建它，当用户按下输入时它会触发搜索功能。

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

https://jsfiddle.net/ymzzpLdd/

Answer 1

正如你所说，你必须附加一个输入。但首先，您必须附加一个表单并设置属性，然后将输入附加到表单。

var form = document.createElement("form");
form.setAttribute("method", "GET");
form.setAttribute("action", "#");         
form.setAttribute("target", "_self");
var input= document.createElement("input");              
input.setAttribute("name", "");
input.setAttribute("value", "");
form.appendChild(input);
document.body.appendChild(form);

更改我的最后一个代码，将其附加到所需位置。

Answer 2

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

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

为搜索功能jquery附加输入文本字段

2 个答案: