如何使用javascripting / JQuery在HTML中重复输入框而不会丢失自动完成功能

时间:2013-11-18 13:02:24

标签: jquery html autocomplete

我对html和jQuery编程相当新。我在代码中遇到的问题是创建输入框列表。页面有一个按钮,可以在一行表的末尾添加一系列3个框。但是该行中的第一个框丢失了原始的自动完成javascript(由typeahead.js提供)。如何让autocompelete脚本在每个新输入框行的第一个框上运行?

       <script src="./js/jquery-1.9.1.min.js"></script>    
       <script src="./js/bootstrap.min.js"></script>
       <script src="./js/typeahead.js"></script>
       <script type="text/javascript">
        function createTextbox(){
            //return "<input type='text' />";
            return "<div class='row'>"+
                        "<div class='input-group'>" +
                            "<div class ='col-md-4'>"+
                                "<input type='text' style='margin: 0 auto;' data-provide='typeahead'data-items='4'class ='form-control'placeholder='Material'>"+
                            "</div>"+
                            "<div class='col-md-4'>"+
                                "<input type='text' style ='margin: 0 auto;'class ='form-control'placeholder ='Type'>"+
                            "</div>"+
                            "<div class='col-md-4'>" +
                                "<input type='text'style ='margin: 0 auto;'class ='form-control'placeholder ='Quantity' >" +
                            "</div>"+
                        "</div>"+
                    "</div>";
        }

        function createRow(){
            return "<tr><td>" + createTextbox() + "</td></tr>" ;
        }
        function getValuesForPostback(){
            //format as XML, JSON, or anything else
            var ToReturn = "<items>"; 
            $('#materialemittlung tr').each(function(){
                ToReturn += "<item>";
                //Get the textbox value
                ToReturn += "<text>" + $(this).find('input[type=text]').val() + "</text>";


                ToReturn += "</item>";
            });
            ToReturn += "</items>";
            return ToReturn;
        }

        //function submitValues()
        //{
          //  alert(getValuesForPostback());
        //}
         //submission function
        $(window).load(function(){
            $('#materialemittlung').append(createRow());

            $('#btnAdd').click(function(){
                $('#materialemittlung').append(createRow());
            });

            $('#btnSubmit').click(function(){
                submitValues();
            });
        });
</script>

任何帮助都会非常感激,欢呼!

0 个答案:

没有答案