Question

我已经使用JQuery自动完成功能完成了自动完成功能。我的要求如下：

为新添加的元素自动添加自动完成功能，这些元素有一个共同的类：speClass

1.我想读取输入框的值，我不知道怎么读？

2.如何为新添加的元素添加自动完成功能。它仅适用于第一个输入（默认显示）

头：

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

HTML：

<tbody id="items">
    <tr>
    <td><input type="text" class="speClass" name="specifications"/></td>
    </tr>
</tbody>

JS

function addItem() {
   var item = "<tr><td><input type='text' class='speClass'  name='specifications' /> </tr>" ;
   $("#items").append(item);
}

$(document).ready(function(){ 
    var cache_com = {};
    $(".specClass").autocomplete({
    source: function( request, response ) {
        var term = $(".speClass").val();
        if(term in cache_com) {
            alert(term);
            response($.map(cache_com[term], function(item) {
                return {
                    label: item,
                    value: item
                }

            }));
            return ;
        }

        $.ajax({
            type:"POST",
            url: "loadSpecList.action",
            data:{
                specQuery: term
            },
            success: function( data ) {
                alert(term);
                cache_com[term] = data;
                response( $.map( data, function( item ) {
                     return {
                        label: item,
                        value: item
                     }
                }));
            },
            dataType: "json"
        });
    },
    minLength: 1,
    select: function( event, ui ) {

    }
    });
});

PS：我纠正了代码中的变量错误

Answer 1

替换

$(".specifications").autocomplete({

通过

$(".specClass").autocomplete({

Answer 2

由于它是一个小部件，您需要为每个新元素调用小部件初始化

function addItem() {
    var item = "<tr><td><input type='text' class='speClass'  name='specifications' /> </tr>" ;
    var speClass =  $(item).appendTo($("#items")).find('.speClass');
    createAutocomplete(speClass)
}

var cache_com = {};
function createAutocomplete(els){
    els.autocomplete({
        source: function( request, response ) {
            var term = request.term;
            if(term in cache_com) {
                alert(term);
                response($.map(cache_com[term], function(item) {
                    return {
                        label: item,
                        value: item
                    }

                }));
                return ;
            }

            $.ajax({
                type:"POST",
                url: "loadSpecList.action",
                data:{
                    specQuery: term
                },
                success: function( data ) {
                    alert(term);
                    cache_com[term] = data;
                    response( $.map( data, function( item ) {
                        return {
                            label: item,
                            value: item
                        }
                    }));
                },
                dataType: "json"
            });
        },
        minLength: 1,
        select: function( event, ui ) {

        }
    });
}

$(document).ready(function(){ 
    createAutocomplete($(".specifications"))
});

您可以使用源方法

中的request.term阅读输入的文本

为新添加的元素添加自动完成功能

2 个答案: