Как найти элемент с использованием подстановочного знака в Kendo AutoComple - PullRequest
0 голосов
/ 03 мая 2018

Я использую Kendo с JQuery, и мне нужно создать поиск с подстановочным знаком

Пример: Apple% Red

Как я могу это сделать?

1 Ответ

0 голосов
/ 04 мая 2018

Несмотря на то, что я не могу найти ссылку на него в документации autocomplete и там написано filter должно быть String, вы можете определить его как function, который получает два параметра, элемент для сравнения и значение поля ввода.

Теперь вопрос в том, что, учитывая, что вы используете % в качестве подстановочного знака, я думаю, что вам следует использовать фильтрацию на стороне сервера, но, учитывая, что вы запрашиваете реализацию JavaScript или jQuery, я думаю, что вы просите реализация браузера.

Если ваши пользователи могут вводить символы подстановки, используя синтаксис регулярных выражений JavaScript, вы можете просто сделать:

$("#autocomplete").kendoAutoComplete({
  filter: function(input, pattern) {
    var re = new RegExp(pattern, 'i');
    return re.test(input);
  },
  dataSource: {
    data: ["one", "two", "three"]
  }
});

Но если вы хотите, чтобы они использовали % в качестве подстановочного знака для любого символа, вы можете внутренне заменить if на .* и сделать что-то вроде:

$("#autocomplete").kendoAutoComplete({
  filter: function(input, pattern) {
    pattern = pattern.replace('%', '.*');
    var re = new RegExp(pattern, 'i';
    return re.test(input);;
  },
  dataSource: {
    data: ["One", "Two", "Three"]
  }
});

ПРИМЕЧАНИЕ : Важно отметить, что по умолчанию автозаполнение не учитывает регистр, но вы можете управлять им, используя ignoreCase

После фрагмента кода. Попробуйте ввести t и t%e

var ignoreCase = true;
$("#autocomplete").kendoAutoComplete({
  ignoreCase: ignoreCase,
  filter: function(input, pattern) {
    pattern = pattern.replace('%', '.*');
    var re = new RegExp(pattern, ignoreCase ? 'i' : '');
    return re.test(input);
  },
  dataSource: {
    data: ["One", "Two", "Three"]
  }
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>

<input id="autocomplete" />
...