Question

I’m implementing a AJAX autocomplete/autosuggest feature, and not only do I want to do the usual show suggestions that are similar to what the user typed, but I’d like to let the user do partial completions to save typing.

So, imagine my dictionary has these values in it: “green apple”, “green pear”, “green fruit”, “blue sky”, “blue water”, “blue wake”.

If the user types in “g”, the suggestions should be “green apple”, “green pear”, “green fruit”, and I’d like to let the user hit TAB or something to update his query to “green “, then they could type “a” and they’d get completed to “green apple”.

I’m trying to model this after linux shell command line completion.

Can you recommend a control/script that does this? Or a modification/customization of an existing control?

Answer 1

This specific type of autocompletion isn’t supported in popular autocompletion plugins (for jQuery, Scripty…) because usually those provide a drop-down UI for choosing the wanted match.

So let’s suppose we haven’t got an out-of-the-box solution. Boo-ho. How hard can it be to code it up?

// takes a text field and an array of strings for autocompletion
function autocomplete(input, data) {
  if (input.value.length == input.selectionStart && input.value.length == input.selectionEnd) {
    var candidates = []
    // filter data to find only strings that start with existing value
    for (var i=0; i < data.length; i++) {
      if (data[i].indexOf(input.value) == 0 && data[i].length > input.value.length)
        candidates.push(data[i])
    }

    if (candidates.length > 0) {
      // some candidates for autocompletion are found
      if (candidates.length == 1) input.value = candidates[0]
      else input.value = longestInCommon(candidates, input.value.length)
      return true
    }
  }
  return false
}

// finds the longest common substring in the given data set.
// takes an array of strings and a starting index
function longestInCommon(candidates, index) {
  var i, ch, memo
  do {
    memo = null
    for (i=0; i < candidates.length; i++) {
      ch = candidates[i].charAt(index)
      if (!ch) break
      if (!memo) memo = ch
      else if (ch != memo) break
    }
  } while (i == candidates.length && ++index)

  return candidates[0].slice(0, index)
}

Test page here — it should work in normal browsers. For supporting IE use event listening from prototype.js, jQuery or other.