jquery动态形成元素并自动完成_Jquery_Forms_Jquery Autocomplete

jquery动态形成元素并自动完成

jquery forms

jquery动态形成元素并自动完成,jquery,forms,jquery-autocomplete,Jquery,Forms,Jquery Autocomplete,我有这段代码，它添加了两个字段，我想使输入具有自动完成功能： $("#addElem").click(function () { var new_id = new Date().getTime(); var content = '<div id="fields"><input type="hidden" name="softwarePerAsset.Index" value="' + new_id + '" /

我有这段代码，它添加了两个字段，我想使输入具有自动完成功能：

$("#addElem").click(function () {

                var new_id = new Date().getTime();

                var content = '<div id="fields"><input type="hidden" name="softwarePerAsset.Index" value="' + new_id + '" />' +
                '<select name="softwarePerAsset[' + new_id +
                '].name" id="softwarePerAsset[' + new_id +
                '].name"> <option value="1">Visio</option><option value="2">Painter</option></select>&nbsp;&nbsp;&nbsp;' +
                '<input type="text" name="softwarePerAsset[' + new_id + '].serial" id="softwarePerAsset[' + new_id +
                '].serial">&nbsp;&nbsp;&nbsp;<a id="test" href="#">Remove Software</a></div>';

                $("#elem").append(content);

            });

我错过了什么

更新#1-完成页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" >

<head><title>

    Index

</title></head>

<body>

  <form action="/element/edit" method="post">

        <div id="elem">

            <!-- If there are software installed, then s -->

            <div class="fields">

                <input type="hidden" name="softwarePerAsset.Index" value="1" />

                <select name="softwarePerAsset[1].name" id="softwarePerAsset[1].name">

                    <option value="1">Visio</option>

                    <option value="2">Painter</option>

                </select>&nbsp;&nbsp;

                <input type="text" name="softwarePerAsset[1].serial" id="softwarePerAsset[1].serial" />&nbsp;&nbsp;

                <a class="test" href="#">Remove Software</a>

            </div>

            <div class="fields">

                <input type="hidden" name="softwarePerAsset.Index" value="2" />

                <select name="softwarePerAsset[2].name" id="softwarePerAsset[2].name">

                    <option value="1">Visio</option>

                    <option value="2">Painter</option>

                </select>&nbsp;&nbsp;

                <input type="text" name="softwarePerAsset[2].serial" id="softwarePerAsset[2].serial" />&nbsp;&nbsp;

                <a class="test" href="#">Remove Software</a>

            </div>



            </div><a href="#" id="addElem">Add Element</a>

        <br />

        <br />



        <input type="submit" name="btnSubmit" value="Submit" />

    </form>



    <script src="/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>



    <script type="text/javascript">

        $(function () {



            //add element to elem div

            $("#addElem").click(function () {



                var new_id = new Date().getTime();



                var content = '<div class="fields"><input type="hidden" name="softwarePerAsset.Index" value="' + new_id + '" />' +

                '<select name="softwarePerAsset[' + new_id +

                '].name" id="softwarePerAsset[' + new_id +

                '].name"> <option value="1">Visio</option><option value="2">Painter</option></select>&nbsp;&nbsp;&nbsp;' +

                '<input type="text" name="softwarePerAsset[' + new_id + '].serial" id="softwarePerAsset[' + new_id +

                '].serial">&nbsp;&nbsp;&nbsp;<a id="test" href="#">Remove Software</a></div>';



                $("#elem").append(content);



                var data = "notepad firefox chrome".split(" ");

                $(content).find('input[type=text]').autocomplete(data);



            });



            //remove fields

            $("#elem").on("click", ".test", function () {

                $(this).closest("div.fields").remove();

            });

        });

    </script>

</body>

</html>


指数
愿景
油漆匠
愿景
油漆匠




$（函数（）{
//将元素添加到元素div
$（“#addElem”）。单击（函数（）{
var new_id=new Date（）.getTime（）；
变量内容=“”+
“视觉画家”+
'   ';
$（“#elem”）。追加（内容）；
var data=“notepad firefox chrome”.split（“”）；
$（内容）.find（'input[type=text]'）。自动完成（数据）；
});
//删除字段
$（“#elem”）。在（“单击”，“测试”，函数（）{
$（this）.closest（“div.fields”）.remove（）；
});
});

内容

只是一个带有html的字符串。您需要将其设置为jquery对象

$（内容）

我是这样解决的：

var options = {
        source: ["notepad", "firefox", "chrome"]
    };

添加了一个类以引用输入字段：

<input class="serial" type="text" name="softwarePerAsset[1368553379670].serial" id="softwarePerAsset[1368553379670].serial">

然后触发

自动完成

事件

 $("#elem").on("keydown.autocomplete", "input.serial", function () {
        $(this).autocomplete(options);
    });

什么都没有发生。我已经发布了完整的页面。

var options = {
        source: ["notepad", "firefox", "chrome"]
    };

 $("#elem").on("keydown.autocomplete", "input.serial", function () {
        $(this).autocomplete(options);
    });