jquery autocomplete search input

Question

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
... 
<div id="search">
      <form method="get" action="{% url 'main:home' %}">        
        <input type="text" name="q" placeholder="Поиск по сайту" value="{{ request.GET.q }}"> 
        <input id="input_id" type="submit" value="Найти">                 
      </form>
</div>
... 
<script> 
$('#search input[name="q"]').autocomplete({ 
  'source': '{% url "main:home" %}', 
  'minLength': 2, 
//  'appendTo': "#input:last"   
}); 
</script>

autocomplete removes previous input value if I press autocomplete, the previous value disappears. I tried adding at the end of the line in a commented out version, but this will not work. need to replace the last unfinished word

Answer 1

$('#search input[name="q"]').autocomplete({ 
  'source': '{% url "main:home" %}', 
  'minLength': 2,    
  'appendTo': "#search"   
}).on( "autocompleteselect", function(event, ui) {
  event.preventDefault();
  var words = this.value.split(' ');
  words[words.length - 1] = ui.item.value;
  this.value = words.join(' ');
});