https://github.com/timakin/autocompl

A light-weight autocomplete integration for Rails application.
https://github.com/timakin/autocompl

Last synced: 16 days ago
JSON representation

A light-weight autocomplete integration for Rails application.

• Host: GitHub
• URL: https://github.com/timakin/autocompl
• Owner: timakin
• License: mit
• Created: 2017-01-25T08:17:04.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-26T23:50:15.000Z (almost 8 years ago)
• Last Synced: 2024-04-25T09:44:01.469Z (7 months ago)
• Language: Ruby
• Size: 51 MB
• Stars: 17
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE

Awesome Lists containing this project

README

        
Autocompl

====

Autocompl is the light-weight library that provides an autocomplete function to Rails app.

This gem depends on Vanilla JavaScript, not jquery.

See the repo of [autoComplete](https://github.com/Pixabay/JavaScript-autoComplete) to check the usage of javascript code.

## Installation

Include the gem on your Gemfile

```

gem 'autocompl'

```

Install it

```

bundle install

```

## Configuration

Add it to your app/assets/javascripts/application.js file

```

//= require autocompl

```

And, add it to your app/assets/stylesheets/application.css file

```

*= require autocompl

```

## Example

As an example, let's configure for embed an autocomplete to search `Product#name`.

At first, edit `routes.rb` to let your javascript to access to the database.

For an example, if you'd like to add an endpoint to `ProductsController`, write down this code.

```

resources :products do

  get "autocomplete_endpoint", on: :collection

end

```

After that, add this to `products_controller.rb`

```

class ProductsController < ApplicationController

  ...

  # This will define `autocomplete_endpoint` on ProductsController.

  autocomplete product: :name

  ...

end

```

Finally, write the javascript code and HTML to generate an autocomplete form.

```

# products.js

$(document).ready(function() {

  new autoComplete({

      selector: 'input[name="productSearch"]',

      source: function(term, response){

          $.getJSON('/products/autocomplete_endpoint', { term: term }, function(data){

            term = term.toLowerCase();

            var matches = [];

            for (i=0; i

...

```

In addition, if you'd search with product `maker` name, that was internationalized with `name_ja` and `name_en` columns,

rewrite your `products_controller.rb` like this.

```

class ProductsController < ApplicationController

  ...

  autocomplete product: :name, maker: [:name_ja, :name_en]

  ...

end

```