32 | );
33 | },
34 |
35 | onSearchChange: function(selected){
36 | this.setState({ selected })
37 | }
38 | })
39 |
40 | React.render(, document.getElementById("content"))
--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | React Fuzzy Search
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/examples/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require("path")
2 | var webpack = require("webpack")
3 |
4 | var config = {
5 | entry: './examples/app.js',
6 | output: {
7 | filename: 'examples/main.js',
8 | publicPath: ""
9 | },
10 | module: {
11 | loaders: [
12 | { test: /\.js?$/, exclude: /node_modules/, loader: 'babel-loader' },
13 | ]
14 | },
15 | plugins: [ ]
16 | };
17 |
18 | if(process.env.NODE_ENV === 'production') {
19 | config.plugins = config.plugins.concat([
20 | new webpack.DefinePlugin({
21 | "process.env": {
22 | NODE_ENV: JSON.stringify("production")
23 | }
24 | }),
25 | new webpack.optimize.DedupePlugin(),
26 | new webpack.optimize.UglifyJsPlugin(),
27 | new webpack.optimize.OccurenceOrderPlugin()
28 | ]);
29 | }
30 | else {
31 | config.devtool = 'eval';
32 | config.debug = true;
33 | }
34 |
35 | module.exports = config;
36 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | /*
2 | Credit to http://qiita.com/kimagure/items/f2d8d53504e922fe3c5c and React Router
3 | */
4 |
5 | var webpack = require('webpack');
6 |
7 | module.exports = function (config) {
8 | config.set({
9 | browsers: [ 'Chrome' ],
10 | singleRun: true,
11 | frameworks: [ 'mocha' ],
12 | files: [
13 | 'tests.webpack.js'
14 | ],
15 | preprocessors: {
16 | 'tests.webpack.js': [ 'webpack', 'sourcemap' ]
17 | },
18 | reporters: [ 'dots' ],
19 | webpack: {
20 | devtool: 'inline-source-map',
21 | module: {
22 | loaders: [
23 | { test: /\.js$/, loader: 'babel-loader' }
24 | ]
25 | }
26 | },
27 | webpackServer: {
28 | noInfo: false
29 | }
30 | });
31 | };
--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
1 | (The MIT License)
2 |
3 | Copyright (c) 2015 zsutton
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-fuzzy-search",
3 | "version": "0.4.0",
4 | "description": "A fuzzy search input",
5 | "main": "./src/index",
6 | "dependencies": {
7 | "classnames": "^1.1.4",
8 | "priorityqueuejs": "^1.0.0",
9 | "react": "^0.13.2"
10 | },
11 | "devDependencies": {
12 | "babel-core": "^5.1.11",
13 | "babel-loader": "^5.0.0",
14 | "browserify": "^9.0.3",
15 | "expect": "^1.6.0",
16 | "karma": "^0.12.31",
17 | "karma-chrome-launcher": "^0.1.8",
18 | "karma-cli": "0.0.4",
19 | "karma-mocha": "^0.1.10",
20 | "karma-sourcemap-loader": "^0.3.4",
21 | "karma-webpack": "^1.5.0",
22 | "mocha": "^2.2.4",
23 | "vinyl-source-stream": "^1.0.0",
24 | "webpack": "^1.8.9"
25 | },
26 | "scripts": {
27 | "test": "karma start --single-run=false",
28 | "examples": "webpack --w --config ./examples/webpack.config.js --progress"
29 | },
30 | "repository": {
31 | "type": "git",
32 | "url": "https://github.com/zsutton/react-fuzzy-search.git"
33 | },
34 | "keywords": [
35 | "search",
36 | "react",
37 | "react-component"
38 | ],
39 | "author": "Zac Sutton",
40 | "license": "MIT",
41 | "bugs": {
42 | "url": "https://github.com/zsutton/react-fuzzy-search/issues"
43 | },
44 | "homepage": "https://github.com/zsutton/react-fuzzy-search"
45 | }
46 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | React Fuzzy Search
2 | ==================
3 |
4 | About
5 | -----
6 |
7 | An approximate search component. FuzzySearch allows users to search data using a best-match searching algorithm that allows for misspellings, typos and out-of-order search terms. For example, given a dataset with "March 16th Safety and Awareness Training, Room 217" a search for "Saferty Training 217" (note the typo) will rate it as a top result (assuming no better matches).
8 |
9 | ## Installation
10 |
11 | ```sh
12 | npm install react-fuzzy-search
13 | ```
14 |
15 | #### Installation Note
16 |
17 | This component is written using CommonJS modules. Unfortunately, both Browserify and Webpack have different methods for using CommonJS in web workers so I've opted to instead include requirements directly in the worker.js file and load it as a blob.
18 |
19 | That means no additional configuration of a path to the worker.js file. There is, however, a current incompatibility with web workers due to this at the moment that I hope to resolve (see support notes).
20 |
21 |
22 |
23 | ## Usage Notes
24 |
25 | ```javascript
26 | var FuzzySearch = require("react-fuzzy-search")
27 |
28 | ...
29 |
30 | // Note: starred props are required.
31 |
32 |
52 |
53 | ```
54 |
55 | ####More on usage
56 |
57 | React Fuzzy Search requires four props.
58 |
59 | * items {Array|Immutable List} An array of objects.
60 | * idField {*} A (unique) value for each object in the items array. This field is used as the key.
61 | * nameField {String} The name that will be displayed as a result
62 | * searchField {String} The name of the property in each item of the items array to be searched.
63 |
64 | Given an array of people such as this
65 |
66 | ```javascript
67 |
68 | var people = [{ _id: 1, name: "Bob Davis" }, { _id: 2, name: "John Thomas" }, ...]
69 |
70 | ```
71 |
72 | One could use React Fuzzy Search like this
73 |
74 | ```javascript
75 |
76 |
82 |
83 | ```
84 |
85 |
86 | ### Special Note on Immutability
87 | In order to be performant over large data sets, React Fuzzy Search does some precomputations on its data. React Fuzzy Search will detect a change in data and re-compute the search data, but in order to do so the items prop must fail an equality check.
88 |
89 | If it's not clear what that means: many array methods will update the array they are called on, changing it in place. For example, _push_, _pop_, _shift_, _unshift_, _splice_ and _sort_ all result in changes to the original array. Some methods, _slice_ and _concat_ notably, will create a new array leaving the array they were called on unchanged. And so,
90 |
91 | ```javascript
92 | var items = ["Bob", "Dave", "Sally"]
93 |
94 | items[1] = "David" // Bad: this.props.items == nextProps.items => true
95 | items.push("Amy") // Also bad: this.props.items == nextProps.items => true
96 |
97 | items = items.concat("Andy") // Good: this.props.items == nextProps.items => false
98 | items = items.slice(0) // Good: creates a copy
99 | items[1] = "David" // Can now update it: this.props.items == nextProps.items => false
100 | ```
101 |
102 | If you need to make updates be sure that you use a method that creates a new array. Or use _slice(0)_ to set your data to a new copy before updating state. An even simpler way would be to use [Immutable.js](https://github.com/facebook/immutable-js).
103 |
104 | Alternatively, immutable can be set to false and items can be updated in place. I haven't tested performance in this case but it's possible search is still performant for small datasets.
105 |
106 | ## Support
107 | Chrome, Firefox, IE>=8.
108 |
109 | #### Web worker support
110 | Due to IE10 throwing a SecurityError when using creating a web worker with a blob, they are disabled IE <11. This will be fixed in a future patch.
--------------------------------------------------------------------------------
/src/components/FuzzySearch.js:
--------------------------------------------------------------------------------
1 | var React = require("react");
2 | var PriorityQueue = require('priorityqueuejs');
3 | var cx = require("classnames")
4 | var containsNode = require("../utils/containsNode")
5 | var JaroWinkler = require("../utils/JaroWinkler")
6 |
7 | var SearchWorker = require("../worker/worker")
8 |
9 | // temporarily disabling IE10
10 | var _canUseWorkers = !!window.Worker && !/MSIE/i.test(navigator.userAgent);
11 |
12 | var punctuationRE = /[^\w ]/g
13 |
14 | function extend(dest, src){
15 | for(var p in src)
16 | dest[p] = src[p];
17 | return dest;
18 | }
19 |
20 | function computeSearchValues(items, opts){
21 | var { field, searchField, delim, immutable, removePunctuation, useWebWorkers, searchLowerCase, threadCount } = opts;
22 |
23 | searchField = searchField || field;
24 |
25 | var _searchItems = [],
26 | slices = [];
27 |
28 | items = typeof items.toArray == "function" ?
29 | items.toArray() :
30 | items;
31 |
32 | items.forEach(function(item){
33 | var _searchValues = [],
34 | added = {};
35 | _searchItems.push({ _originalItem: item, _searchValues })
36 |
37 | var curSearchField = Object.prototype.toString.call(searchField) === '[object Array]' ?
38 | searchField.reduce((acc, f) => acc + item[f] + " ", "") :
39 | item[searchField]
40 |
41 | if(removePunctuation)
42 | curSearchField = curSearchField.replace(punctuationRE, "")
43 |
44 | curSearchField.split(delim).forEach(function(term){
45 | var _term = searchLowerCase ? term.toLowerCase() : term
46 |
47 | /**
48 | Track if the field has multiples of the same word and ignore them if so
49 | */
50 | if(!added[_term]){
51 | _searchValues.push(_term)
52 | added[_term] = true
53 | }
54 | })
55 | })
56 |
57 | /**
58 | If we're using web workers split them computed search data into equal chunks per thread
59 | */
60 | if(useWebWorkers && immutable){
61 | for(var i = 0; i < threadCount; i++){
62 | var start = Math.floor(i * (_searchItems.length / threadCount)),
63 | end = Math.floor((i + 1) * (_searchItems.length / threadCount))
64 | if(i < 3)
65 | slices.push(_searchItems.slice(start, end))
66 | else
67 | slices.push(_searchItems.slice(start))
68 | }
69 | }
70 |
71 | return {
72 | computing: false,
73 | items: _searchItems,
74 | slices: slices
75 | }
76 | }
77 |
78 | var FuzzySearchResult = React.createClass({
79 | render: function(){
80 | var classes = cx("fuzzy-search-result", {
81 | "fuzzy-search-result-highlighted": this.props.highlighted
82 | })
83 |
84 | return (
85 |