Javascript 是否可以根据不同类别更改脚本中的数据源

我的Html。 我有自动完成的搜索栏（文本框）以及3个不同的选项来过滤基于1）员工姓名2）员工ID 3）电子邮件ID的搜索。 因此，根据过滤器选项，选定的数据源（我的意思是列表）应该更改。 帮助我根据下拉列表中选择的选项更改脚本中的数据源

<div class="col-sm-3" style="margin:15px 0px 0px 20px; cursor:pointer; width:180px!important">
                    <select class="form-control" id="searchFilterList" style="width:200px!important" onchange="changeSearchBarID()">
                        <option value="employeeName">Employee Name</option>
                        <option value="employeeID">Employee ID</option>
                        <option value="emailID">Email ID</option>
                    </select>

<input class="form-control" type="text" placeholder="Search..." id="EmployeeNameSearch"; style="max-width:800px!important;">

员工姓名
员工ID
电子邮件ID

我的剧本。我有三张单子

<script>
                            $(function () {

                                var employeeNameList = [
                                    "Abishek Chandrasekar", "Bharat", "Deepak", "Eric",
                                        "Fizil", "Gowtham", "Harbajan",
                                        "Akshara", "Roshini"
                                ];

                                var employeeIDList = [
                                    "SF1010", "SF2010", "SF3010", "SF4010",
                                        "SF5010", "SF6010", "SF7010",
                                        "SF9010", "SF8010"
                                ];

                                var emaiIDList = [
                                    "abishek.chandrasekar@syncfusion.com", "bharath@syncfusion.com", "deepak@syncfusion.com", "eric@syncfusion.com",
                                        "fizil@syncfusion.com", "gowtham@syncfusion.com", "harbajan@syncfusion.com",
                                        "akshara@syncfusion.com", "roshini@syncfusion.com"
                                ];
                                $('#EmployeeNameSearch').ejAutocomplete({
                                    width: "800px",
                                    dataSource: employeeNameList /*I wanna change this list namebased on the selected category in dropdown*/
                                });
});

$（函数（）{
变量employeeNameList=[
“Abishek Chandrasekar”、“Bharat”、“Deepak”、“Eric”，
“菲齐尔”、“戈瑟姆”、“哈巴扬”，
“Akshara”、“Roshini”
];
var employeeIDList=[
“SF1010”、“SF2010”、“SF3010”、“SF4010”，
“SF5010”、“SF6010”、“SF7010”，
“SF9010”、“SF8010”
];
变量emaiIDList=[
“亚比谢。chandrasekar@syncfusion.com", "bharath@syncfusion.com", "deepak@syncfusion.com", "eric@syncfusion.com",
"fizil@syncfusion.com", "gowtham@syncfusion.com", "harbajan@syncfusion.com",
"akshara@syncfusion.com", "roshini@syncfusion.com"
];
$（“#EmployeeNameSearch”）.ejautomplete({
宽度：“800px”，
dataSource:employeeNameList/*我想根据下拉列表中选定的类别更改此列表名称*/
});
});

并在您选择的更改事件中重新初始化插件：

您可以尝试以下方法：

   data =  {
  employeeName: [
    "Abishek Chandrasekar", "Bharat", "Deepak", "Eric",
    "Fizil", "Gowtham", "Harbajan",
    "Akshara", "Roshini"
  ],
  employeeID: [
    "SF1010", "SF2010", "SF3010", "SF4010",
    "SF5010", "SF6010", "SF7010",
    "SF9010", "SF8010"
  ],
  emaiID: [
    "abishek.chandrasekar@syncfusion.com", "bharath@syncfusion.com", "deepak@syncfusion.com", "eric@syncfusion.com",
    "fizil@syncfusion.com", "gowtham@syncfusion.com", "harbajan@syncfusion.com",
    "akshara@syncfusion.com", "roshini@syncfusion.com"
  ]
};

    $('#searchFilterList').change(function(){
     name = $(this).val();
     $('#EmployeeNameSearch').ejAutocomplete("destroy");
     $('#EmployeeNameSearch').ejAutocomplete({
        width: "800px",
        dataSource: data[name]
       });
    });

并在您选择的更改事件中重新初始化插件：

您可以尝试以下方法：

   data =  {
  employeeName: [
    "Abishek Chandrasekar", "Bharat", "Deepak", "Eric",
    "Fizil", "Gowtham", "Harbajan",
    "Akshara", "Roshini"
  ],
  employeeID: [
    "SF1010", "SF2010", "SF3010", "SF4010",
    "SF5010", "SF6010", "SF7010",
    "SF9010", "SF8010"
  ],
  emaiID: [
    "abishek.chandrasekar@syncfusion.com", "bharath@syncfusion.com", "deepak@syncfusion.com", "eric@syncfusion.com",
    "fizil@syncfusion.com", "gowtham@syncfusion.com", "harbajan@syncfusion.com",
    "akshara@syncfusion.com", "roshini@syncfusion.com"
  ]
};

    $('#searchFilterList').change(function(){
     name = $(this).val();
     $('#EmployeeNameSearch').ejAutocomplete("destroy");
     $('#EmployeeNameSearch').ejAutocomplete({
        width: "800px",
        dataSource: data[name]
       });
    });

---

您应该使用jQuery的

on

事件处理程序来监听选择框的

更改

事件。当选择框的值更改时，将根据所选选项选择相关数据，然后使用正确的数据重新初始化自动完成框

(function () {
    var employeeNameList = [
        "Abishek Chandrasekar", "Bharat", "Deepak", "Eric",
        "Fizil", "Gowtham", "Harbajan",
        "Akshara", "Roshini"
    ];

    var employeeIDList = [
        "SF1010", "SF2010", "SF3010", "SF4010",
        "SF5010", "SF6010", "SF7010",
        "SF9010", "SF8010"
    ];

    var emaiIDList = [
        "abishek.chandrasekar@syncfusion.com", "bharath@syncfusion.com", "deepak@syncfusion.com", "eric@syncfusion.com",
        "fizil@syncfusion.com", "gowtham@syncfusion.com", "harbajan@syncfusion.com",
        "akshara@syncfusion.com", "roshini@syncfusion.com"
    ];

    function initAutocomplete(data) {
        $('#EmployeeNameSearch').ejAutocomplete("destroy");
        $('#EmployeeNameSearch').ejAutocomplete({
            width: "800px",
            dataSource: data
        });
    }

    // when filter box value is changed, re-init
    // autocomplete based on selected option
    $('#searchFilterList').on('change', function () {
        var selectedOption = $(this).val();

        if (selectedOption === 'employeeName') {
            initAutocomplete(employeeNameList);
        } else if (selectedOption === 'employeeID') {
            initAutocomplete(employeeIDList);
        } else if (selectedOption === 'emailID') {
            initAutocomplete(emaiIDList);
        } else {
            initAutocomplete([]);
        }
    });

    // On page load, initialize autocomplete with employee names
    initAutocomplete(employeeNameList);
})();

---

您应该使用jQuery的

on

事件处理程序来监听选择框的

更改

事件。当选择框的值更改时，将根据所选选项选择相关数据，然后使用正确的数据重新初始化自动完成框

(function () {
    var employeeNameList = [
        "Abishek Chandrasekar", "Bharat", "Deepak", "Eric",
        "Fizil", "Gowtham", "Harbajan",
        "Akshara", "Roshini"
    ];

    var employeeIDList = [
        "SF1010", "SF2010", "SF3010", "SF4010",
        "SF5010", "SF6010", "SF7010",
        "SF9010", "SF8010"
    ];

    var emaiIDList = [
        "abishek.chandrasekar@syncfusion.com", "bharath@syncfusion.com", "deepak@syncfusion.com", "eric@syncfusion.com",
        "fizil@syncfusion.com", "gowtham@syncfusion.com", "harbajan@syncfusion.com",
        "akshara@syncfusion.com", "roshini@syncfusion.com"
    ];

    function initAutocomplete(data) {
        $('#EmployeeNameSearch').ejAutocomplete("destroy");
        $('#EmployeeNameSearch').ejAutocomplete({
            width: "800px",
            dataSource: data
        });
    }

    // when filter box value is changed, re-init
    // autocomplete based on selected option
    $('#searchFilterList').on('change', function () {
        var selectedOption = $(this).val();

        if (selectedOption === 'employeeName') {
            initAutocomplete(employeeNameList);
        } else if (selectedOption === 'employeeID') {
            initAutocomplete(employeeIDList);
        } else if (selectedOption === 'emailID') {
            initAutocomplete(emaiIDList);
        } else {
            initAutocomplete([]);
        }
    });

    // On page load, initialize autocomplete with employee names
    initAutocomplete(employeeNameList);
})();