Question

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

{
  "size": 0,
  "aggregations": {
    "timeslice": {
      "histogram": {
        "script": {
          "inline": "doc['openDate'].date.setZone(DateTimeZone.forID(tz)); doc['openDate'].date.getHourOfDay()",
          "params": {
            "tz": "Europe/London"
          }
        },
        "interval": 1,
        "min_doc_count": 0,
        "extended_bounds": {
          "min": 0,
          "max": 23
        },
        "order": {
          "_key": "desc"
        },
        "offset": 0
      }
    }
  }
}

我的剧本。我有三个清单

<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;">

Answer 1

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

您可以尝试这样的事情：

   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]
       });
    });

Answer 2

您应该使用jQuery的change事件处理程序来侦听Select框的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);
})();

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

2 个答案: