Question

以下代码仅适用于FileNo（字段）的自动填充功能。我希望这个功能也适用于员工的其他属性。即FirstName，LastName

dataTextField：“FileNo”＆lt; ---------------- here dataTextField获取唱歌字段。怎么可能是多个领域？
enter image description here

enter image description here

Answer 1

您应该使用模板更改自动填充下拉列表中显示的内容。然后dataTextField将仅在input元素中使用。

Here就是创建模板的方式。

Answer 2

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

以能够搜索您想要的任何列的方式实施index.php/hr_management/manage_hr/search_employee/（FileNo，FirstName，LastName ...）。
此服务将返回三列（至少），提供id，列名称，您在其中找到匹配项和匹配值。
匹配值用于显示autocomplete。
autocomplete上选定的值后，使用列名称和匹配值对grid进行过滤。

Answer 3

Kendo Autocomplete具有dataTextField，它接受用于过滤项目的字段名称（例如，employeeID，employeeName等数据源）。

要使用多个字段，您必须设置其中一个字段，以便在架构中的解析数据源期间保存连续字段下面。然后将自动完成功能的过滤器设置为“包含”

我这样做了。

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 重构，以保存连接的姓氏，ID和名字字符串。

下一步是使用已解析的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>'
        });

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

或者，您可以转换为

数据 =新员工（名字，姓氏，身份证号码）; //在客户端

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

多个dataTextField的kendoAutoComplete

4 个答案: