CODEWITHSUNDEEP
jquery-uimeteor
rdickert
rdickert

Reputation: 580

Can't get jQuery-ui autocomplete to work in Meteor

I see that others are successfully using jQuery-ui within Meteor, but my first attempts to play with autocomplete have failed. Here's what I've tried:

I put the downloaded jquery-ui files in my client directory (I didn't keep the jQuery files as jquery is already available). This fails because jQuery looks for the css files using a relative path, and Meteor doesn't serve them that way - it flattens the paths, and when the original path is requested, it returns the main page of the app; Chrome dev tools returns an error indicating that it was expecting css but got text/html. You can get the autocomplete to drop down, but it closes as soon as you arrow-key or mouseover an option.

I then tried using a jQuery-ui smart package from barisbalic on github. This causes autocomplete to function almost normally once you add the css to the project. However, the dropdown <ul> appears in the upper-lefthand corner of the window instead of at its correct position under the <input> element.

What's the right way to do this? I've looked at Meteorite and Atmosphere and didn't find a package. Do I need to learn to build my own smart packages?

Upvotes: 3

Views: 1498

Answers (1)

David Wihl
David Wihl

Reputation: 1491

Use your form's rendered event to start autocomplete.

You need to flatten your datasource or collection into an array (like addr_book, below), which can be done via a Meteor.autorun() on the collection:

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

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


Template.compose_to_cc_bcc_subject.rendered = function () {
  start_compose_autocomplete();
}

function start_compose_autocomplete() {
  $("#field1 #field2").autocomplete({
      minLength: 0,
      source: function( request, response ) {
        response( $.ui.autocomplete.filter(
         addr_book, extractLast( request.term ) ) );
      },
      focus:function() {
        return false;
      },
      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;
    }
  });
}

This uses the jQuery autocomplete widget, with multiple values.

Upvotes: 1

Related Questions