Dan Leveille Dan Leveille - 8 months ago 52
Javascript Question

How to override user input on Jquery autocomplete?

I have a simple autocomplete function that searches an array of objects. It's working fine, but I want to override what the user is searching for.

I want to append another input's value to their search. For example, if they search "cat", I want to append

so their search becomes "cat dog" (without changing the actual <input>'s value).

This seems like an easy thing to do, but I can't figure out how to do it without overriding the entire search method.

Existing code:

source: data,
appendTo: '#admin-results'
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $('<li>')
.append('<div>' + item.label + '</div>')


The following will do what you ask by using function for source

var terms = ["c++", "java dog", "php dog", "coldfusion", "javascript dog", "asp dog", "ruby"]
  source: function(req, response) {
    var term = req.term + ' dog';// adjust to a dom value or whatever
    var res = terms.filter(function(item) {
      return item.toLowerCase() === term.toLowerCase()

Adjust filter function accordingly also. This is only rough for absolute match