1

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

$("#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);

            });

我试过添加这个，但没有任何效果：

var data = "notepad firefox chrome".split(" ");
content.find('input[type=text]').autocomplete(data);

我错过了什么？

更新 #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>
4

2 回答 2

0

content只是一个带有 html的字符串。你需要让它成为 jquery 对象$(content)

$(content).find('input[type=text]').autocomplete(data);
于 2013-05-14T16:00:26.043 回答
0

我这样解决：

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

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

数据源定义如下：

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

然后触发autocomplete事件

 $("#elem").on("keydown.autocomplete", "input.serial", function () {
        $(this).autocomplete(options);
    });
于 2013-05-14T17:46:37.513 回答