Append input text field for search function jquery

Question

I have the following jquery code right now. This is meant to be a search function eventually, right now i got my animation, but i am yet to add an input text field to the function that i can use for my C# code for the search function. This should emerge after the border expands and dissapear when the user clicks on the html, just like the script does to the border.

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

I guess i have to make an appendto function, but im still unsure how to create it in such a way that when the user press enter it fires the search function.

Right now however, i just want to create the textfield, so that it can be used in the further process.

https://jsfiddle.net/ymzzpLdd/

Answer 1

As you said you have to append an input. But first you have to append a Form and set the attributes and then append your input to the form.

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

Change the last code of mine to append it to the desired place.

Answer 2

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

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