full-text-search-uidb v1.0.3

full-text-search-uidb

Introduction
full-text-search-uidb is a simple full-text search library that allows you to index and search data on the client side. It is inspired by Solr and is designed to be lightweight and efficient for use in web applications. The package supports searching through multiple fields, fuzzy matching, and scoring for relevance ranking.

Features

• Full text search support across multiple fields
• Fuzzy term matching with edit distance
• Simple scoring mechanism to rank search results
• Easy to integrate into React and Angular projects
• Browser compatible (supports ES5+)
• Easy-to-use API with examples

Installation

To use full-text-search-uidb, you can either include the source file in your project or use npm.

Using npm:

npm install full-text-search-uidb

React component to perform the search

// SearchComponent.jsx
import React from 'react';
import { fullTextSearch } from 'full-text-search-uidb';

const SearchComponent = () => {
  const data = [
    { id: 1, title: 'Twelfth-Night', body: 'If music be the food of love, play on.' },
    { id: 2, title: 'Macbeth', body: 'Is this a dagger which I see before me?' },
    { id: 3, title: 'Hamlet', body: 'To be, or not to be, that is the question.' },
  ];

  const query = 'love';
  const results = fullTextSearch(data, query, ['title', 'body']);

  return (
    <div>
      <h1>Search Results</h1>
      <ul>
        {results.map((result) => (
          <li key={result.id}>
            <strong>{result.title}</strong>: {result.body}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default SearchComponent;

Angular component to perform the search

// search.component.ts
import { Component } from '@angular/core';
import { fullTextSearch } from 'full-text-search-uidb';

@Component({
  selector: 'app-search',
  template: `
    <h1>Search Results</h1>
    <ul>
      <li *ngFor="let result of results">
        <strong>{{ result.title }}</strong>: {{ result.body }}
      </li>
    </ul>
  `,
})
export class SearchComponent {
  data = [
    { id: 1, title: 'Twelfth-Night', body: 'If music be the food of love, play on.' },
    { id: 2, title: 'Macbeth', body: 'Is this a dagger which I see before me?' },
    { id: 3, title: 'Hamlet', body: 'To be, or not to be, that is the question.' },
  ];
  query = 'love';
  results = fullTextSearch(this.data, this.query, ['title', 'body']);
}

Examples and Use Cases for Using full-text-search-uidb

Example 1: Basic Search

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'javascript';
const searchKeys = ['title', 'description'];

const results = fullTextSearch(data, query, searchKeys);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 1 }]

**Example 2: Case Sensitive Search**

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'JavaScript';
const searchKeys = ['title', 'description'];
const options = { caseSensitive: true };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output: []

Example 3: Fuzzy Search

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'jscript';
const searchKeys = ['title', 'description'];
const options = { fuzzySearchEnabled: true };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 1 }]

Example 4: Synonyms

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'JS';
const searchKeys = ['title', 'description'];
const options = { synonyms: { 'JS': ['JavaScript'] } };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 1 }]

Example 5: Stop Words

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'learn javascript';
const searchKeys = ['title', 'description'];
const options = { stopWords: ['learn'] };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// []

Example 6: Real-Time Search

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'javascript';
const searchKeys = ['title', 'description'];
const options = { realTime: true, debounce: 300 };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output (results will appear only when there is an input change and it is debounced for 300ms).

Example 7: Stemming

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'learn';
const searchKeys = ['title', 'description'];
const options = { stemming: true };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 1 }]

Example 8: Custom Matcher

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'Basics';
const searchKeys = ['title', 'description'];
const options = {
  customMatcher: (value, search) => value.toUpperCase() === search.toUpperCase()
};

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 1 }]

Example 9: Index Creation

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'javascript';
const searchKeys = ['title', 'description'];
const options = { index: true };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 1 }]

Example 10: Weighted Search

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'javascript';
const searchKeys = ['title', 'description'];
const options = {
  weights: { title: 2, description: 1 }
};

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 2 }]

Example 11: Insights

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'javascript';
const searchKeys = ['title', 'description'];
const options = { insights: true };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// {
//   results: [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 1 }],
//   totalResults: 1,
//   mostRelevant: { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 1 }
// }

Example 12: Transform Function

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'Basics';
const searchKeys = ['title', 'description'];
const options = {
  transform: val => val.toLowerCase()
};

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 1 }]

Example 13: Index Creation with Stop Words

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'javascript basics';
const searchKeys = ['title', 'description'];
const options = { index: true, stopWords: ['basics'] };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics', score: 2 }]

Example 14: Real-Time Search with Custom Matcher

const data = [
  { id: 1, title: 'JavaScript Essentials', description: 'Learn JavaScript basics' },
  { id: 2, title: 'Advanced React Patterns', description: 'Deep dive into React and its patterns' }
];
const query = 'js';
const searchKeys = ['title', 'description'];
const options = { realTime: true, debounce: 200, customMatcher: (value, search) => value.startsWith(search) };

const results = fullTextSearch(data, query, searchKeys, options);
console.log(results);
// Output (results will be updated in real-time as the input changes).

Example 15: Nested Data

const data = [
  { id: 1, title: 'JavaScript Essentials', details: { author: 'John Doe', topics: ['basics', 'fundamentals'] } },
  { id: 2, title: 'Advanced React Patterns', details: { author: 'Jane Smith', topics: ['patterns', 'optimization'] } }
];
const query = 'basics';
const searchKeys = ['title', 'details.author', 'details.topics'];

const results = fullTextSearch(data, query, searchKeys);
console.log(results);
// Output:
// [{ id: 1, title: 'JavaScript Essentials', details: { author: 'John Doe', topics: ['basics', 'fundamentals'] }, score: 1 }]

These examples demonstrate additional configurations and use cases for the fullTextSearch function, showing how it can adapt to different scenarios and data structures.