Giter VIP home page Giter VIP logo

ember-cli-lunr's Introduction

ember-cli-lunr

npm version Code Climate Build Status

Simple full-text search for ember-cli apps using lunr.js.

Description

This is a ember-cli wrapper for lunr.js, a small full-text search library for use in the browser. It indexes JSON documents and provides a simple search interface for retrieving documents that best match text queries.

Installation

Installing the library is as easy as:

ember install ember-cli-lunr

Configuring

Lunr 2.0 uses immutable index, so, you'll have to have an array of items to be searched beforehand. For usage with Lunr 1.0, see 0.0.5 of this add-on.

Given a model named post,

// app/pods/post/model.js
import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string'),
});

First, you'll have to create an index with the documents (keep in mind indexes are immutable) using the Lunr class,

import Lunr from 'ember-cli-lunr/lunr';
...
// Pass in models to create method, this indexes all properties on the model.
let posts = Lunr.create({ models: get(this, 'posts') });

// Or you could specify just the properties that you want to index via the properties key.
let posts = Lunr.create({ models: get(this, 'posts'), properties: ['title'] });

Now, you can search anywhere in your app using the search method. This method is just a wrapper around lunr.js search method. For more advanced searching, checkout the lunr.js guides.

posts.search('lorem ipsum');

Putting this all together in a controller,

// app/pods/posts/controller.js
import Controller from '@ember/controller';
import { get, set } from '@ember/object';
import Lunr from 'ember-cli-lunr/lunr';

export default Controller.extend({
  // assuming posts array was set on controller from
  // setupController in route.
  posts: null,
  searchQuery: null,

  init() {
    this._super(...arguments);
    let postsIndex = Lunr.create({ models: get(this, 'posts') });
    set(this, 'postsIndex', postsIndex);
  },

  result: computed('searchQuery', function() {
    var query = this.get('searchQuery'),
        resultIds = get(this, 'postsIndex').search(query).mapBy('ref');

    return items.filter(function(item) {
      return resultIds.contains(item.get('id'));
    });
  });
});

Support

Please leave a โญ to show some support. Thanks!

ember-cli-lunr's People

Contributors

charizard avatar ember-tomster avatar jkubaile avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

jkubaile

ember-cli-lunr's Issues

Add shorthand for creating indexes

Currently, the creation of an index looks like this,

...
import Lunr from 'ember-cli-lunr/lunr';

export default Controller.extend({
  posts: null,
  init() {
    this._super(...arguments);
    let postsIndex = Lunr.create({ models: get(this, 'posts'), properties: ['title'] });
    set(this, 'postsIndex', postsIndex);
  },
  ...
});

It would be good to invoke this using a shorthand like,

...
import createLunrIndex from 'ember-cli-lunr/lunr-index';

export default Controller.extend({
  posts: null,
  postsIndex: createLunrIndex('posts', ['title'])
  ...
});

Not sure if this is possible though ๐Ÿค” ?

Ember 3.4 compatibility

Using 0.0.3 results in the following error (browser console):
Uncaught Error: Could not find module emberimported fromember-cli-lunr/services/lunr`
Also the cli complains about babel deprecation. This should be updated to at least 6.6, too.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.