Question

我正在尝试在我正在制作的程序中实现自动提示功能，其中食谱成分的建议将悬停在文本字段中，用户会输入内容。但我遇到了如何使用其ID来定位元素的问题。文本字段是在页面上动态添加的，这是我的代码：

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

            var id = $('.gc').length + 1;

            var n       = $('.num_of_fields').val(), // number of groups to add
                new_row = '<span class="gc group" id="'+id+'">'
                               +'<input type="text" name="ingr_name[]" id="input_' +id+'" onkeyup = "suggest(this.value)" onblur = "fill()" value="" autocomplete="off" />&nbsp;'
                               +'<?php echo form_input('amount[]', set_value('amount[]')); ?>&nbsp;'
                               +'<?php echo form_input('unit[]', set_value('unit[]')); ?>&nbsp;'
                               +'<span class="remove">Remove</span>'
                               +'<div class="suggestion_box" id="suggestions_' +id+'" style="display: none;">'
                                   +'<div class="suggestion_list" id="suggestion_list_' +id+'">&nbsp;</div>'
                               +'</div>'
                          +'</span>';

            for ( var i = 0; i < n ; i++ ) {

                $("#ingr").append(new_row);

            }   

            return false;

      });

现在，我可以成功地添加字段，而且我仍然坚持如何使autosuggest工作。我正在尝试使用此代码：

function suggest(input_string)
{
    var id = $(this).attr('id');

    if(input_string.length == 0)
    {
        $('#suggestions').fadeOut();
    }
    else
    {
        //$('#input').addClass('load');
        $.post("<?php echo base_url(); ?>recipe/autosuggest", {query_string: ""+input_string+""}, function(data) {

            if(data.length > 0) 
            {
                $("#suggestions").fadeIn();
                $("#suggestion_list").html(data);
                //$("#input").removeClass('load');
            }   
        });
    }
}

function fill(this_value)
{
    $(".input").val(this_value);
    setTimeout("$('#suggestions').fadeOut();", 100);    
}

我试过看看我的var id = $（this）.attr（'id'）;会给出输入字段的ID，但不幸的是，它并没有给我我需要的东西。

我有办法解决这个问题吗？我们将非常感谢您的帮助。非常感谢。

顺便说一句，确切地说，我想获得''的ID，以便我可以简单地做：

("#suggestions_" +id).fadeIn();
("#suggestion_list_" +id).html(data);

Answer 1

在您的推荐功能中，它不知道this是什么。您可以将建议功能更改为以下内容：

(function($) {
    $.fn.suggest = function() {
        var id = $(this).attr('id');
        var input_string = $(this).val();
        ...
    };
}(jQuery));

然后像这样调用该函数：

$(this).suggest()

而不是：

suggest(this.value)

希望这有帮助。

Answer 2

您没有获取ID，因为您没有将输入传递给函数，this将在函数内部window。

不要依赖id，而是为输入提供一个类：

+'<input type="text" name="ingr_name[]" class="suggest-input" onblur="fill()"
     value="" autocomplete="off" />&nbsp';

然后在你的$(document).ready中将一个直播活动绑定到该课程并添加建议功能的代码：

$('.suggest-input').live('keyup' function(event) {
    var $this = $(this);
    var myval = $this.val();
    var url   = "<?php echo base_url(); ?>recipe/autosuggest";

    if(myval.length == 0) {
        $('#suggestions').fadeOut();
    } else {
        $.post(, {query_string: myval},
            function(data) {
               if(data.length > 0) {
                    $("#suggestions").fadeIn();
                    $("#suggestion_list").html(data);
               }   
        });
    }
}

如何在值更改时获取文本字段的ID？

2 个答案: