Autocomplete search form, search in the middle of texts

Question

I am using the autocomplete to search the query.

In this source code, if you input ac you can get accepts , action_name .

However, I would like to get action_name with input name as a normal search form.

How can I make it?

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

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

Answer 2

If you want to use the autocomplete plugin this will do it:

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

});

You need to override the default regex used for autocomplete.

Answer 3

1 . Instead of just checking if the value is in the data element you can split the data element by - and _ .

value.split(/-|_/)

2 . Then loop through it with a forEach() which takes as a parameter a function. e is the data element's value.

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

3 . Then we just check if the input is in the e string

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

4 . If true and only if true we need to tell the grep() we're in that we have a successful match. To do so we need to set a boolean.

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

Above return; will end the search in the current split data element.

Here is the full code:

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

Of course, this can be improved by splitting all the data values once on page load and store them in a special array to check.

Answer 4

Check this out

 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>