Web应用JavaScript报错：Uncaught TypeError调用indexOf遇未定义变量

错误根源 #

错误触发于template.js第16行的addActiveClass函数，核心原因是对未定义变量调用了indexOf方法。结合你实现的实时输入联想功能，问题出在typeahead的配置和数据处理环节。

代码中的问题点 #

你的typeahead代码存在两处关键错误：

• source函数参数为typeahead, query，但AJAX请求的data里误用了未定义的request变量，导致后端接收的searchText为undefined，返回数据异常引发后续处理错误。
• 配置的property: 'name'与构造的联想数据结构不匹配：你生成的对象只有SteelId和TagNumber，没有name属性，typeahead找不到该属性会触发未定义错误，进而引发indexOf调用失败。

修复步骤 #

1. 修正AJAX请求参数
   将data中的request替换为source函数提供的query参数，确保传递用户输入的查询值：

   data: { searchText: query, maxResults: 10, classCodeId: 0 },
   

2. 匹配property与数据结构
   两种可选方案：

   • 方案一：修改property为实际存在的字段TagNumber

     property: 'TagNumber',
     

   • 方案二：在构造数据对象时添加name属性

     group = {
         SteelId: data.SteelId,
         TagNumber: data.TagNumber,
         name: data.TagNumber // 新增name属性，匹配配置的property
     };
     

3. 加固addActiveClass函数
   如果上述修改后仍报错，打开template.js第16行，给调用indexOf的变量添加存在性判断，避免对undefined操作：

   // 示例：假设原代码是判断某个字符串是否包含active
   if (targetVariable && targetVariable.indexOf('active') > -1) {
       // 原有逻辑
   }
   

修复后的完整代码 #

var masterTagSearchUrl = '@Url.Action("FindSteelTags", "Session")';
$('#ScannedCoil_TagNo').typeahead({
    source: function (typeahead, query) {
        $.ajax({
            url: masterTagSearchUrl,
            type: "POST",
            data: { searchText: query, maxResults: 10, classCodeId: 0 },
            dataType: "JSON",
            success: function (results) {
                var manufacturers = [];
                $.map(results, function (data) {
                    manufacturers.push({
                        SteelId: data.SteelId,
                        TagNumber: data.TagNumber,
                        name: data.TagNumber
                    });
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name', 
    onselect: function (obj) {
        // 可添加选中联想项后的逻辑，如填充数据到对应位置
    }
});

内容的提问来源于stack exchange，提问作者tech