使用 jQuery 和 Typeahead 在动态创建的输入字段上自动完成

Question

我正在尝试使用 Typeahead 在动态创建的输入字段上获得自动完成运行。我有以下代码：

HTML:

<div class="input_fields_wrap">
     <a href="#" class="add_field_button">Add More Fields</a> </br>
     <div><input type="text" name="typeahead[]" class="typeahead tt-query" id="1"></div>    
     <div><input type="text" name="typeahead[]" class="typeahead tt-query" id="2"></div>
</div>

Javascript:

/***************Autocompletion***************/

                $(document).ready(function(){
                $('input.typeahead').typeahead({
                    name: 'typeahead',
                    remote:'search.php?key=%QUERY',
                    limit : 10
                    });
                });


/***************Create Input fields dynamically***************/

                    $(document).ready(function() {
                        var max_fields      = 10; //maximum input boxes allowed
                        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
                        var add_button      = $(".add_field_button"); //Add button ID
                        var x = 2; //initlal text box count

                        $(add_button).click(function(e)
                        {
                            if(x < max_fields)
                            {
                                x++; 
                                $(wrapper).append('<div><input type="text" name="typeahead[]" class="typeahead tt-query" id="' + x + '"><a href="#" class="remove_field">Remove</a></div>'); //add input box
                            }
                        });

                        $(wrapper).on("click",".remove_field", function(e)
                        {
                            $(this).parent('div').remove(); x--;
                        })
                    });

我可以通过单击 "Add More Fields" link 创建新的输入字段。我的 2 个现有文本字段的自动完成是 also working。但是当我创建一个新的输入字段时，自动完成功能不起作用。自动完成的数据来自 MYSQL 数据库。

我希望有人知道为什么这不起作用。

非常感谢您！

Answer 1

当您创建新元素时：

$(add_button).click(function(e)
{
    if(x < max_fields)
    {
        x++; 
        $(wrapper).append('<div><input type="text" name="typeahead[]" 
                   class="typeahead tt-query" id="' + x + '">
                   <a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
});

您需要初始化相应的预输入对象。在之前的 $(wrapper).append 之后你需要添加：

$('#' + x).typeahead({
      name: 'typeahead',
      remote:'search.php?key=%QUERY',
      limit : 10
});

使用 jQuery 和 Typeahead 在动态创建的输入字段上自动完成

Autocompletion on dynamically created input fields using jQuery and Typeahead

html

javascript

jquery

autocomplete

typeahead.js