Question

这是我想要做的事情。我想在所有输入框中添加jquery自动完成功能。最初我只有2个盒子，用户可以动态添加多个盒子。自动完成功能在前两个框中有效，但在动态添加的按钮中失败。

代码：

HTML：

<!doctype html>
<html>

    <head>
        <title>TakeMeHome</title>
        <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> -->
        <!--<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>-->
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
         <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
         <script type="text/javascript" src="js/app.js"></script>
         <link type="text/css" rel="stylesheet" href="css/design.css"/> 



    </head>

    <body>
        <center>
                Your Place:<input class="address" id="source" type="text"/><br/>
                <div id= "div1">Friend1:<input class="address" id="friend1" type="text"/></div><br/>
                <pre>
                <div id="button">Add!</div> <div id="button2">Remove</div></br>
            </pre>
            <div id="sumbit_button">GO!</div>
            <div id="map" style = "width: 500px; height: 500px"></div>

        </center>

    </body>

</html>

JS

$(document).ready(function() {

var geocoder;
var map;
var marker;
var friends_cnt = 1;
var friends = [];
var distance = [];

$('#button').click(function() {
    if (friends_cnt < 11) {
        $('<div  id = div' + (friends_cnt + 1) + '>Friend' + (friends_cnt + 1) + ':<input type="text" class="address"  id="friend' + (friends_cnt + 1) + '"/></div>').insertAfter('#div' + friends_cnt);
        friends_cnt++;
    } else {
        console.log("Limit reached");
    }
});

$('#button2').click(function() {
    if (friends_cnt > 1) {
        $('#friend' + friends_cnt).remove();
        $('#div' + friends_cnt).remove();
        friends_cnt--;
    }
});

geocoder = new google.maps.Geocoder();

$(function() {
    $(".address").autocomplete({
        source : function(request, response) {
            geocoder.geocode({
                'address' : request.term
            }, function(results, status) {
                response($.map(results, function(item) {
                    return {
                        label : item.formatted_address,
                        value : item.formatted_address,
                        latitude : item.geometry.location.lat(),
                        longitude : item.geometry.location.lng()
                    }
                }));
            })
        },
    });
});

$('#sumbit_button').on("click", function() {
    console.log("button clicked");
    var a = [];
    a.push($("#source").val());
    for ( i = 1; i <= friends_cnt; i++) {
        a.push($("#friend" + i).val());
    }

    console.log("a :");
    console.log(a);

    var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json";

    console.log("gurl :" + gurl);
    $.ajax({
        url : gurl,
        data : {
            origins : a.join('|').replace(/ /g, '+'),
            destinations : a.join('|').replace(/ /g, '+'),
            sensor : false
        },
        success : function(response) {
            console.log("response type :");
            console.log( typeof response);
            if ( typeof response == "string") {
                response = JSON.parse(response);
            }
            var rows = response.rows;
            for (var i = 0; i < rows.length; i++) {
                distance[i] = [];
                for (var j = 0; j < rows[i].elements.length; j++) {
                    distance[i][j] = rows[i].elements[j].distance.value;
                }
            }
        }
    });
    console.log("No.of friends is " + friends_cnt);
    console.log(distance);
});

}）;

CSS

input {
margin: 10px 4px;
}

#button, #button2 {

    width: 70%;
    margin: 0 auto;
}

.ui-autocomplete {
    background-color: white;
    width: 300px;
    border: 1px solid #cfcfcf;
    list-style-type: none;
    padding-left: 0px;
}

.ui-helper-hidden-accessible {
    display: none;
}

当我使用类概念添加自动完成时，我应该得到结果。

你能告诉我我错在哪里吗？

Answer 1

在您的点击事件中：

$('#button').click(function ()...

您应该在新添加的输入字段上设置自动填充，例如：

    $('#button').click(function () {
        if (friends_cnt < 11) {

        $('<div  id = div'+(friends_cnt+1)+'>Friend' + (friends_cnt+1) + ':<input type="text" class="address"  id="friend' + (friends_cnt+1) + '"/></div>').insertAfter('#div'+friends_cnt);

       $('div#div'+(friends_cnt+1)).autocomplete(...);

       friends_cnt++;

    }

    else {
        console.log("Limit reached");
    }

});

由于您的自动填充仅附加到当前DOM，而不是动态添加的。

Answer 2

你必须重新将自动完成应用于每个元素，如Kapo建议

 $('div#div'+(friends_cnt+1)).autocomplete(...);

或使用liveuery（有关详细信息，请参阅this thread）

Answer 3

在页面加载时，您的自动完成程序会附加到具有.address类的字段，但是在页面加载时，您没有任何.address字段，因此不会附加任何内容。

你需要运行

$(".address").autocomplete({

在您将新字段添加到dom后，或者更好的是，将输入作为对象，您可以将事件直接附加到它上面，如：

$input = $('input')
            .attr('type', 'text')
            .attr('class', 'address')
            .attr('id', 'friend')
            .autocomplete({ etc

Answer 4

当我得到答案时，代码中的这一变化对我有用：在$('#button').click(function () {函数

中添加

$(function() {
   $("#friend"+(friends_cnt+1)).autocomplete({
      source: function(request, response) {  . .. . .

这将在每次制作时为所有框添加自动完成功能。

jquery自动完成不能处理动态添加的输入框

4 个答案: