文本框动态输入后,typeahead无法工作

typeahead not working after textbox dynamic input

本文关键字:typeahead 工作 动态 输入 文本      更新时间:2023-09-26

我使用twitter bootstrap 3 typeahead,带有bloodhound建议引擎。

我已经在html表的列中的一个文本框(类:typeahead)中应用了这个typeahead,在选择了typeahead之后,会出现一个新行。

我在将typeahead应用于这个新动态添加的文本框(也是类:typeahead)时遇到了一个问题。Chrome开发错误:"未捕获类型错误:未定义不是函数"

这是我的JS:

<script src="<?php echo site_url('assets/js/jquery-2.0.3.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/bootstrap.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/bloodhound.js');?>"></script>
<script src="<?php echo site_url('assets/js/typeahead.jquery.js');?>"></script>
<script>
/*///////////////////
// bloodhound
//
*/
var stocksData = source_inventory;
var stocks = new Bloodhound({
    datumTokenizer: function (d) { 
        for (var prop in d) { return Bloodhound.tokenizers.whitespace(d.item_code);}        
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    //local:  ["(A)labama","Alaska","Arizona","Arkansas","Arkansas2","Barkansas"]
    limit: 5, //#2 added
    local : stocksData
});
stocks.initialize();
/*///////////////////
// typeahead
//
*/
function apply_typeahead(elm){ alert('tes and yes');
    $(elm).typeahead(null,{ 
        displayKey: function(stocks) {
            for (var prop in stocks) { 
                return stocks.item_code;
            }
        },
        source:stocks.ttAdapter() ,
        updater: function (stocks) {
            return stocks;
        }
    }).on('typeahead:selected', function (obj, datum) {
        var var_datum = [];
        var_datum[0] = datum.item_id;
        dialog_inventory_pull_data(var_datum);
    });
}
//apply_typeahead('input[name^=ast_code].typeahead');

$(document).ready(function(){
    /*
        //some code
    */
});

/*$('.typeahead').on('added',function(){
    apply_typeahead('input[name^=ast_code].typeahead');
    //$('.typeahead').typeahead(typeaheadSettings);
});*/
//JS CUSTOM PAGE
function table_detail_insert(data){     
    if(data){       
        for(var p = 0;p<data.length;p++){
            /*code*/            
        }
        //apply_typeahead($('input[name^=ast_code].typeahead'));
        //apply_typeahead('input[name^=ast_code].typeahead');
        return data;        
    }else{
        console.log('error');   
    }   
}
var url_1 = "/inventory/detail";
function dialog_inventory_pull_data(data_inventory){ 
    var data_inventory_param = $.map(data_inventory, function(value, index) {
        return [value];
    });
    var data_ajax_raw = $.ajax({
        url:ajax_url_1,
        data: {inventory:data_inventory_param},
        dataType: "json",
        success: function(result){
            table_detail_insert(result);            
        }
    }); 
}   
</script>

我试图从控制台运行applytypeahead函数,它与初始化的文本框一起工作,但在动态创建新行后,从控制台再次运行相同的函数不起作用,所有文本框都没有typeahead。

可能出了什么问题?

感谢

问题是对于动态添加的输入元素,您需要在创建它们之后初始化插件。

因此,一个解决方案是首先创建一个方法,该方法可以重复使用,为传递的一组元素(如)初始化插件

链接:使用Typeahead 处理动态添加的输入元素