Multiple words autocomplete filtering

Question

This is my code to autocomplete. This one work well for the first word. But I need to filter other words also in the same search box. this is my code.

its working But I need to filter second word also. like Hello world Google. When user type hello its filter hello world. after that he type Google then i want to filter Google word

<div class="ui-widget">
<label for="tags">Search: </label>
<input type="text" id="tags" onkeypress="edValueKeyPress()"/>
</div>

$(function edValueKeyPress() { 
var availableTags = [
"Hello",
"Hello World ",
"Google",
"Google Gmail",
"Micheal",
"Peter"
];
$( "#tags" ).autocomplete({
source: availableTags
}); 
})

jsfiddle playground

Answer 1

You can take reference from here for more details. You need to update source and select callbacks of your autocomplete. Also no need to use $(function edValueKeyPress() { block and onkeypress="edValueKeyPress()".

Try it below.

function split(val) {
  return val.split(/,\s*/);
}

function extractLast(term) {
  return split(term).pop();
}

var availableTags = [
  "Hello",
  "Hello World",
  "Google",
  "Google Gmail",
  "Micheal",
  "Peter"
];
$("#tags").autocomplete({
  source: function(request, response) {
    // delegate back to autocomplete, but extract the last term
    response($.ui.autocomplete.filter(
      availableTags, extractLast(request.term)));
  },
  select: function(event, ui) {
    var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // add placeholder to get the comma-and-space at the end
    terms.push("");
    this.value = terms.join(", ");
    return false;
  }
});

 <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js" jq=""></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">

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