Question

我有一个问题是jquery自动完成，它使用一个文本框完美，但当我使用具有相同ID的jquery创建多个文本框时，它只用于第一个文本框而不是另一个文本框。我的问题是我想创建多个文本框并使用所有文本框实现相同的自动填充数据

这是我使用jquery创建文本框的代码

var totalSelect = $('#max_player').val();
    $('#competitor_box').empty();
    for (var i = 1; i <= totalSelect; i++) {
        var ajaxauto = '<div class="form-group col-sm-3"><label for="tournament_name">Pocker # '+i+'</label><input id="autocomplete-ajax" type="text" class="form-control" autocomplete="off"></div>';
        $('#competitor_box').append(ajaxauto);
    }

此代码用于ajax自动完成

$('#autocomplete-ajax').autocomplete({
    // serviceUrl: '/autosuggest/service/url',
    lookup: countriesArray,
    lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
        var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
        return re.test(suggestion.value);
    },
    onSelect: function(suggestion) {
        $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
    },
    onHint: function (hint) {
        $('#autocomplete-ajax-x').val(hint);
    },
    onInvalidateSelection: function() {
        $('#selction-ajax').html('You selected: none');
    }
});

请帮助我解决这个问题对我来说非常重要谢谢大家。

Answer 1

    var totalSelect = $('#max_player').val();
        $('#competitor_box').empty();
        for (var i = 1; i <= totalSelect; i++) {
            var ajaxauto = '<div class="form-group col-sm-3"><label for="tournament_name">Pocker # '+i+'</label><input class="txtAutocomplete" type="text" class="form-control" autocomplete="off"></div>';
            $('#competitor_box').append(ajaxauto);   
        }

自动填充功能

    $('.txtAutocomplete').autocomplete({
        // serviceUrl: '/autosuggest/service/url',
        lookup: countriesArray,
        lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
            var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
            return re.test(suggestion.value);
        },
        onSelect: function(suggestion) {
            $('#selction-ajax').html('You selected: ' + suggestion.value + ', ' + suggestion.data);
        },
        onHint: function (hint) {
            $('#autocomplete-ajax-x').val(hint);
        },
        onInvalidateSelection: function() {
            $('#selction-ajax').html('You selected: none');
        }
    });

Answer 2

为什么你为几个输入使用相同的ID？如果必须标记多个元素，请使用类，例如每个文本框上的.autocomplete-ajax-input。然后使用$('.autocomplete-ajax-input').autocomplete

声明自动填充函数

ajax使用多个文本框jquery自动完成相同的数据

2 个答案: