It’s relatively easy to setup jQuery-UI’s autocomplete in Aurelia, but I did encounter an error (like this user on SO) when I tried to use it. Unfortunately installing by “jspm install jquery-ui” resulted in an $(…).autocomplete is not a function” error.

No problem. Let’s load it through npm:

jspm install npm:jquery-ui

Now we can add the imports it in our viewmodel:

import {autocomplete} from ‘jquery-ui’;
import ‘jquery-ui/themes/cupertino/jquery-ui.css!’; // whatever theme you want

After this it’s pretty straightforward. Let’s insert an image before the label to make things more interesting:

attached(){
 var members = [
  {
  value: "Rick",
  label: "Rick",
  desc: "group leader",
  icon: "styles/images/rick.jpg"
   },
  {
  value: "Coral!",
  label: "Carl",
  desc: "future leader w/ eyepatch",
  icon: "styles/images/carl.jpg"
  }
 ];

 $( "#members" ).autocomplete({
  minLength: 0,
  source: members,
  select: function( event, ui ) {
     console.log(ui.item.value);
  }
  }).data("uiAutocomplete")._renderItem = function (ul, item) {
  return $("<li />")
    .data("item.autocomplete", item)
    .append("<a><img height='25' width='25' src='" + item.icon + "' />" + item.label +               "</a>")
    .appendTo(ul);
  };
 }

View

<label for=”members”>Members: </label>
<input id=”members” type=”text” />