php - Kendo 自动完成搜索多列

标签 php autocomplete kendo-ui kendo-grid

我在我的 KendoGrid 中使用了 kendo Auto Complete, 目前它工作正常,但它只能搜索或仅跨一列获取数据,

我希望它跨多个列进行搜索。

这是我在 KendoGrid 中的自动完成代码。

 $(function(){
    $("#EmployeeGrid").kendoGrid({
        dataSource:{
            serverPaging: true,
            serverFiltering: true,
            pageSize: 5,
            transport: {
                read: "<?php echo base_url() ?>index.php/hr_management/manage_hr/list_view"
            },
            schema:{
                data: "data",
                total: "total"
            }
        },
        toolbar: kendo.template($("#toolbarTemplate").html()),
        pageable: {
            input:true,
            numeric:false
        },
        columns: [
            {
                field: "EmployeeID",
                hidden:true
            },
            {
              field: "FileNo",
              title: "File Number"
            },
            {
                template:"#= FirstName # #= LastName #",
                title: "Full Name"
            },
            {
                field:"City",
                title:"City"
            },
            {
                field:"AddressLine1",
                title:"Address 1"
            },

            {
                field:"WorkPhone",
                title:"WorkPhone"
            },
            {
                field:"MobileNo",
                title:"Mobile No"
            },
            {command: { text: "View", click: showDetails }, title: " ", width: "140px"},
            {command: { text: "Edit", click: EditUserDetails }, title: " ", width: "140px"}
        ]
    });

});
var autoCompleteUsers = $("#employees").kendoAutoComplete({
    minLength: 3,
    dataTextField: "FileNo",
    dataSource: {
        serverFiltering: true,
        transport: {
            read: {
                type: "GET",
                dataType: "json",
                contentType:'application/json; charset=utf-8',
                url: "<?php echo base_url() ?>index.php/hr_management/manage_hr/search_employee/",
                data: function (arg){
                    return {FileNo : autoCompleteUsers.data("kendoAutoComplete").value()};
                }
            }
        }
    },
    change: onChangeAutoComplete
});
function onChangeAutoComplete(){
    var value = this.value();
    var grid = $('#EmployeeGrid');
    if (value) {
        grid.data("kendoGrid").dataSource.filter({ field: "FileNo", operator: "Contains", value: value });
    } else {
        grid.data("kendoGrid").dataSource.filter({});
    }
}


function showDetails(e) {
    e.preventDefault();
    $('.action_button').html('');
    var row = $(e.target).closest("tr");
    var item = $("#EmployeeGrid").data("kendoGrid").dataItem(row);
    $.ajax({
        type: "POST",
        url: "<?php echo base_url().'index.php/hr_management/manage_hr/view_employee_profile/'?>"+JSON.parse(item.EmployeeID),
        success: function(output_string){
            var data = output_string.split("MyMark_Employee");
            $('.second_column_content_container').html(data[0]);
            $('.action_button').html(data[1]);

            $("#createEmployee").hide();
        },
        error: function(data){
            alert("error");
        }
    });

}


function EditUserDetails(e) {
    e.preventDefault();
    $('.action_button').html('');
    var row = $(e.target).closest("tr");
    var item = $("#EmployeeGrid").data("kendoGrid").dataItem(row);
    $.ajax({
        type: "POST",
        url: "<?php echo base_url().'index.php/hr_management/manage_hr/edit_employee_details/'?>"+JSON.parse(item.EmployeeID),
        success: function(output_string){
            var data = output_string.split("MyMark_Employee");
            $('.second_column_content_container').html(data[0]);
            if(data[1]!= " ")
            {
                $('.action_button').html(data[1]);
            }

        },
        error: function(data){
            alert("error");
        }
    });

}

要做什么? 我需要定义多个 dataTextField: 吗? 需要建议。

最佳答案

好问题。我也想知道同样的事情。

查看 Kendo 代码 (kendo.web.min.js) 后,似乎无法为属性 dataTextField 定义多个字段。看起来只允许一个字段。

解决方法是在您的模型中添加一个字段,其中包含(以字符串形式)您要搜索的所有字段。然后将 dataTextField 设置为该字段。这不是一个理想的解决方案,但它确实有效。

关于php - Kendo 自动完成搜索多列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16014205/

相关文章:

jquery按键事件仅在特定键码上触发自动完成

checkbox - kendo ui 在未选中时获取复选框的 id

javascript - Kendo UI 网格分页不起作用

c# - 为什么我的 KendoUI 网格在我的 ASP.NET Core 应用程序中显示重复记录?

php - 在 php xampp ubuntu 中找不到类 'MongoClient'

php - 如何从帖子中获取数据到类(class)

php - 循环 PHP 代码以将特定数量的唯一行插入 MySQL

php - 值不会插入到数据库的表中

javascript - 如何在 onsen-ui 中使用自动完成功能?

php - jquery 在 wordpress 中自动完成