如何在Kendo AutoComplete（jQuery版）中使用通配符实现搜索？

Hey there! Let's figure out how to add wildcard search (like Apple%Red) to your jQuery-based Kendo components. I'll break this down with practical examples, since this is a common need for components like Kendo Grid or DropDownList.

核心思路 #

Kendo UI's default filtering doesn't natively support % wildcards, so we need to build custom filtering logic. The trick is converting user-input wildcards into regular expressions (replace % with .*, which matches any sequence of characters in regex) and using that to match your data.

Example 1: Wildcard Search for Kendo Grid #

Let's use a Kendo Grid as an example—this is where wildcard search is most frequently requested.

1. Add a search input
   First, add an input box above your Grid for users to enter wildcard keywords:

   <input type="text" id="productSearch" placeholder="Enter keywords (supports %, e.g. Apple%Red)" />
   <div id="grid"></div>
   

2. Implement custom filtering
   Write a function to convert the user's input into a regex, then apply it to the Grid's data source:

   $(document).ready(function() {
       // Initialize the Grid
       const grid = $("#grid").kendoGrid({
           dataSource: {
               data: [
                   { productName: "Apple Red", category: "Fruit" },
                   { productName: "Apple Green", category: "Fruit" },
                   { productName: "Red Banana", category: "Fruit" },
                   { productName: "Apple Red Juice", category: "Drink" }
               ],
               schema: {
                   model: {
                       fields: {
                           productName: { type: "string" },
                           category: { type: "string" }
                       }
                   }
               }
           },
           columns: [
               { field: "productName", title: "Product Name" },
               { field: "category", title: "Category" }
           ]
       }).data("kendoGrid");
   
       // Listen for input changes in the search box
       $("#productSearch").on("input", function() {
           const keyword = $(this).val().trim();
           if (!keyword) {
               // Clear filtering if input is empty
               grid.dataSource.filter([]);
               return;
           }
   
           // Escape regex special characters, then replace % with .*
           const regexPattern = keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&').replace(/%/g, '.*');
           const regex = new RegExp(regexPattern, "i"); // "i" makes it case-insensitive
   
           // Apply custom filter
           grid.dataSource.filter({
               field: "productName",
               operator: function(value) {
                   return regex.test(value);
               },
               value: keyword // Placeholder value, we use the custom operator logic instead
           });
       });
   });
   

   The key here is the custom operator function—it uses our converted regex to match data. We also escape regex special characters (like . or *) so user input doesn't break the regex logic.

Example 2: Wildcard Search for Kendo DropDownList #

The same logic applies to DropDownLists—we just override the default filtering behavior:

$("#dropdown").kendoDropDownList({
    dataSource: [
        { text: "Apple Red", value: "1" },
        { text: "Apple Green", value: "2" },
        { text: "Red Banana", value: "3" }
    ],
    dataTextField: "text",
    dataValueField: "value",
    filtering: function(e) {
        const keyword = e.filter.value;
        if (!keyword) return;

        // Convert wildcard to regex
        const regexPattern = keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&').replace(/%/g, '.*');
        const regex = new RegExp(regexPattern, "i");

        // Override default filtering
        e.preventDefault();
        this.dataSource.filter({
            operator: function(item) {
                return regex.test(item.text);
            }
        });
    }
});

Quick Notes #

• Case sensitivity: Add the "i" flag to your regex (like in the examples) if you want case-insensitive matching.
• Extend to other wildcards: If you need to support _ (matches a single character, like SQL's _), replace _ with . in your regex pattern.
• Server-side filtering: If your data comes from a server, move the wildcard logic to the backend (convert % to a SQL LIKE clause) and pass the raw user input to your API.

内容的提问来源于stack exchange，提问作者davdomin