jquery_textcomplete

JqueryTextcomplete

JqueryTextcomplete can be used for autocompleting search fields, tags in textareas, and other textfield inputs! Compatible with Ruby on Rails applications, can be used in conjunction with searchkick gem for returning autocomplete results and with acts-as-taggable-on gem for autocomplete tagging. Requires Jquery.

Installation

Add this line to your application's Gemfile:

gem 'jquery_textcomplete'

And then execute:

$ bundle

Or install it yourself as:

$ gem install jquery_textcomplete

Usage

Include in your application.js file:

//= require jquery.textcomplete

Include in your application.scss file:

*= require jquery.textcomplete

Example usage:

In views:

<script type="text/javascript">
  addTextCompleteForHashtagsAndUsertags($('.textcomplete'));
</script>

In application.js:

function addTextcompleteForHashtagsAndUsertags($textarea) {
  $textarea.textcomplete([
    {
      // Hashtag strategy
      match: /(\s|^)#(\w+)$/,
      search: function (term, callback) {
        $.getJSON('/posts/autocomplete_hashtag', { query: term })
          .done(function (resp) { callback(resp); })
          .fail(function ()     { callback([]);   });
      },
      replace: function (value) {
        return '$1' + value + ' ';
      }
    },
    {
      // Usertag strategy
      match: /(\s|^)@([^\s]+)$/,
      search: function (term, callback) {
        $.getJSON('/users/autocomplete_usertag', { query: term })
          .done(function (resp) { callback(resp); })
          .fail(function ()     { callback([]);   });
      },
      replace: function (value) {
        return '$1' + value + ' ';
      }
    }
  ]);
}

In users_controller.rb:

def autocomplete_usertag
  render json: User.search(params[:query], {
    fields: ["name"],
    limit: 10,
    load: false,
    misspellings: {below: 2}
  }).map{|user| user.name.downcase.prepend('@').split(' ').join('.')}
end

In routes.rb:

get 'autocomplete_usertag' => 'users#autocomplete_usertag', on: :collection

For more options and style customization, please, see jQuery Textcomplete documentation.

To Note: z-index for dropdown is 100, therefore you must set z-index of surrounding elements below 100 if you want the textcomplete dropdown to appear above surrounding elements.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/speterlin/jquery_textcomplete. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The gem is available as open source under the terms of the MIT License.