php - kendoAutoComplete 用于多个 dataTextField

Question

下面的代码仅适用于 FileNo（字段）的自动完成。我希望这个功能也适用于员工的其他属性。即名字，姓氏

dataTextField: "FileNo" <---------------- 这里 dataTextField 获取 sing 字段。怎么可能适用于多个领域？

Answer 1

您应该使用模板来更改自动完成下拉列表中显示的内容。那么 dataTextField 将只在输入元素内部使用。

这是创建模板的方法。

Answer 2

由于您知道要搜索哪些列，因此我的建议是：

1. index.php/hr_management/manage_hr/search_employee/以能够搜索您想要的任何列的方式实现（, FileNo, FirstName... LastName）。
2. 此服务将返回（至少）三列，提供您在其上找到匹配项和匹配值id的列名。
3. 匹配值用于显示autocomplete.
4. 一旦选择了值，就autocomplete使用列名和匹配值在grid.

Answer 3

Kendo Autocomplete 有 dataTextField，它接受一个字段名称（例如，数据源的雇员 ID、雇员名称等）以用于过滤项目。

要使用多个字段，您必须在解析模式中的数据源期间将其中一个字段设置为保存连接的字段，如下所示。然后将您的自动完成过滤器设置为“包含”

我做了如下。

var myDataSrc = new kendo.data.DataSource({    
                    transport: {
                        read: {
                            type:"GET",
                            url:clientDataURL,
                            dataType: "jsonp",
                            contentType: "application/json",
                        }                           
                    }, 
                      schema: {
                            parse: function(clntDB) {
                                $.each(clntDB, function(ky, clnt) {
                                  clnt.firstName = clnt.clientUID + " | " + clnt.firstName+ "  " + clnt.lastName;

                                });
                                return clntDB;
                            } 
                     },
                     pageSize: 4    // Number of Items to show during input
        });

/// 参见上面的firstName，它被重构为包含连接的 lastname 、 ID 和 firstname 字符串。

下一步是使用解析的 firstName 作为kendo Autocomplete的dataTextField的值。

然后 var selectedClntID; //// 实际上，这旨在获取ID以供将来使用

$("#YOURSEARCHINPUTID").kendoAutoComplete({
                dataSource: myDataSrc ,
                template:   tmplSrchdClnt,  // YOUR TEMPLATE like "<div>firstName</div>"            
                dataTextField:"firstName",  
                filter:"contains",    /// DON'T FORGET TO ADD THIS
                minLength    : 1 ,
                select: function(e) {
                   var selectedClnt = this.dataItem(e.item.index()),
                       x = kendo.stringify(selectedClnt);
                       selectedClntID =    JSON.parse(x);


               }
                // headerTemplate: '<div><h2>ID - LastName</h2></div>'
        });

然而，很难找到这样的资源指示，当你看到它工作时，它真是太棒了。这是我项目的自动完成引擎。我是这样做的。

或者，您可以转换为

数据=新员工（名字，姓氏，ID）；// 在客户端

function Employee( firstname, lastname, ID ){
  this.filterStr = firstname + ""+lastname+" "+ID;
}

将数据提供给 kendo AutoComplete dataSource 并将filterStr用作 dataTextField。

Answer 4

另一个将新字段添加到数据课程以用作 dataTextField 的代码示例。

// Build our data source object.
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: readUrl,
    }
  },
  group: {field: "region"},
  schema: {
    data: function(response) {
      $.each(response, function(k, v) {
        response[k].searchString = v.airport + " " + v.iataCode;
      });

      return response;
    }
  }
});


$(selector).kendoAutoComplete({
  dataTextField: "searchString",
  filter: "contains",
  template: '<span class="k-state-default">#: data.airport # (#: data.iataCode #)</span>',
  height: 400,
  dataSource: dataSource,
});