Я использую автозаполнение для поиска запроса.

В этом исходном коде, если вы введете ac, вы можете получить accepts, action_name.

Однако я хотел бы получить action_name с вводом name в качестве обычной формы поиска.

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

$(function() {
  var data = [
    'accepts',
    'action_name',
    'add',
    'add_column',
    'add_index',
    'add_timestamps',
    'after_create',

  ];

  $('#txtKeywd').autocomplete({
    source: function(request, response) {
      response(
        $.grep(data, function(value){
          return value.indexOf(request.term) === 0;
        })
      );
    },
    autoFocus: true,
    delay: 500,
    minLength: 2
  });
});
0
whitebear 30 Авг 2017 в 11:50

4 ответа

Лучший ответ
$(function() {
  var availableTags = [
    'accepts',
    'action_name',
    'add',
    'add_column',
    'add_index',
    'add_timestamps',
    'after_create',
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
1
Ivan 30 Авг 2017 в 09:33

Если вы хотите использовать плагин автозаполнения, он сделает это:

$(document).ready(function () {
     var data = [
    'accepts',
    'action_name',
    'add',
    'add_column',
    'add_index',
    'add_timestamps',
    'after_create',

  ];

  $('#txtKeywd').autocomplete({
    source: function(request, response) {
        var re = $.ui.autocomplete.escapeRegex(request.term);
        var matcher = new RegExp( re, "i" );
        var a = $.grep( data, function(item,index){
            return matcher.test(item);
        });
        response( a );
    },
    autoFocus: true,
    delay: 500,
    minLength: 2
  });    

});

Вам необходимо переопределить регулярное выражение по умолчанию, используемое для автозаполнения.

0
calinaadi 30 Авг 2017 в 09:29

1 Вместо того, чтобы просто проверять, находится ли значение в элементе данных, вы можете разделить элемент данных на - и _.

value.split(/-|_/)

2 Затем выполните цикл с forEach(), который принимает в качестве параметра функцию. e - это значение элемента данных.

value.split(/-|_/).forEach(function(e) {});

3 Затем мы просто проверяем, находится ли ввод в строке e

if(e.indexOf(request.term) === 0) {}

4 Если true и только если true , нам нужно сообщить grep(), что мы находимся в успешном совпадении. Для этого нам нужно установить логическое значение.

if(e.indexOf(request.term) === 0) { isIn = true; return; }

Выше return; завершит поиск в текущем разделенном элементе данных.

Вот полный код:

$(function() {
  var data = [
    'accepts',
    'action_name',
    'add',
    'add_column',
    'add_index',
    'add_timestamps',
    'after_create',
  ];

  $('#tags').autocomplete({
    source: function(request, response) {
      response(
        $.grep(data, function(value) {
          let isIn;
          value.split(/-|_/).forEach(function(e) {
            if(e.indexOf(request.term) === 0) { isIn = true; return; }
          });
          return isIn
        })  
      );
    },
    autoFocus: true,
    delay: 500,
    minLength: 2
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Конечно, это можно улучшить, разделив все значения данных один раз при загрузке страницы и сохранив их в специальном массиве для проверки.

0
Ivan 30 Авг 2017 в 09:30

Проверь это

var data = [
  'accepts',
  'action_name',
  'add',
  'add_column',
  'add_index',
  'add_timestamps',
  'after_create',
];

function split(val) {
    return val.split(/ \s*/);
}
function extractLast(term) {
    return split(term).pop();
}

$("#opt")
  .autocomplete({
      minLength: 0,
      source: function(request, response) {
          var term = request.term,
              results = [];
          term = extractLast(request.term);
          if (term.length > 0) {
              results = $.ui.autocomplete.filter(data, term);
          }
          response(results);
      },
      focus: function() {
          return false; // prevent value inserted on focus
      },
      select: function(event, ui) {

      }
  });
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div class="ui-widget">
  <label for="opt">Type Here:</label><br/>
  <input id="opt" size="50">
</div>
0
GNB 30 Авг 2017 в 09:31