Question

我正在使用自动填充功能来搜索查询。

在此源代码中，如果您输入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
  });
});

Answer 1

＆＃13;

$(function() {
  var availableTags = [
    'accepts',
    'action_name',
    'add',
    'add_column',
    'add_index',
    'add_timestamps',
    'after_create',
  ];
  $("#tags").autocomplete({
    source: availableTags
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

如果你想使用自动完成插件，可以这样做：

$(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
  });    

});

您需要覆盖用于自动完成的默认正则表达式。

Answer 3

1。您可以将数据元素拆分为-和_，而不仅仅是检查值是否在数据元素中。

value.split(/-|_/)

2。然后使用forEach()循环遍历它，该e将函数作为参数。 value.split(/-|_/).forEach(function(e) {});是数据元素的值。

3。然后我们只检查输入是否在if(e.indexOf(request.term) === 0) {}字符串

中

grep()

4。如果为真且仅当为真，我们需要告诉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>

Carbon::parse("2018-08-01") //tuesday

当然，这可以通过在页面加载时拆分所有数据值并将它们存储在一个特殊的数组中来进行检查来改进。

Answer 4

检查出来

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>

自动填写搜索表单，在文本中间搜索

4 个答案: