https://github.com/drashland/moogle
An easy way to "Google" your "Map" using search terms. Works in Node, Deno, and the browser.
https://github.com/drashland/moogle
browser deno javscript node typescript
Last synced: 7 months ago
JSON representation
An easy way to "Google" your "Map" using search terms. Works in Node, Deno, and the browser.
- Host: GitHub
- URL: https://github.com/drashland/moogle
- Owner: drashland
- License: mit
- Created: 2021-03-16T21:54:19.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T00:33:37.000Z (almost 2 years ago)
- Last Synced: 2025-07-01T08:07:24.160Z (7 months ago)
- Topics: browser, deno, javscript, node, typescript
- Language: TypeScript
- Homepage:
- Size: 73.2 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Moogle
An easy way to "Google" your "Map" using search terms.
---
## Quickstart
Moogle works in Node, Deno, and in the browser. Follow the appropriate
quickstart guide below to get started quickly. We have quickstart guides for:
- Node - JavaScript
- Node - TypeScript
- Deno - JavaScript
- Deno - TypeScript
- Browser
### Quickstart: Node - JavaScript
1. Initialize your project as a Node project.
```shell
$ npm init -y
```
_Note: `-y` skips all of the prompts._
2. Install Moogle.
```
$ npm install @drashland/moogle
```
3. Create your `app.js` file.
```javascript
const { Moogle } = require("@drashland/moogle");
const service = new Moogle();
service.addItem(["hello"], "world");
console.log(service.search("hel"));
```
4. Run your `app.js` file.
```shell
$ node app.js
```
You should see the following output:
```
Map(1) {
0 => { id: 0, item: 'world', searchTerm: 'hello', searchInput: 'hel' }
}
```
### Quickstart: Node - TypeScript
1. Initialize your project as a Node project.
```shell
$ npm init -y
```
_Note: `-y` skips all of the prompts._
2. Install Moogle, TypeScript, and `ts-node`.
```
$ npm install @drashland/moogle
$ npm install typescript
$ npm install --global ts-node
```
3. Create your `app.ts` file.
```typescript
import { Moogle } from "@drashland/moogle";
const serviceWithoutTypes = new Moogle();
// Or use the following syntax to specify a type (in this case, it's a string)
// const serviceWithTypes = new Moogle();
serviceWithoutTypes.addItem(["hello"], "world");
console.log(serviceWithoutTypes.search("hel"));
```
4. Run your `app.ts` file.
```shell
$ ts-node app.ts
```
You should see the following output:
```
Map(1) {
0 => { id: 0, item: 'world', searchTerm: 'hello', searchInput: 'hel' }
}
```
### Quickstart: Deno - JavaScript
1. Create your `app.js` file.
```javascript
import { Moogle } from "https://unpkg.com/@drashland/moogle@1.0.0/lib/esm/Moogle.js";
const service = new Moogle();
service.addItem(["hello"], "world");
console.log(service.search("hel"));
```
2. Run your `app.js` file.
```shell
$ deno run app.js
```
You should see the following output:
```
Map(1) {
0 => { id: 0, item: 'world', searchTerm: 'hello', searchInput: 'hel' }
}
```
### Quickstart: Deno - TypeScript
1. Create your `app.ts` file.
```typescript
import { Moogle } from "https://deno.land/x/moogle@v1.0.0/mod.ts";
const serviceWithoutTypes = new Moogle();
// Or use the following syntax to specify a type (in this case, it's a string)
// const serviceWithTypes = new Moogle();
serviceWithoutTypes.addItem(["hello"], "world");
console.log(serviceWithoutTypes.search("hel"));
```
2. Run your `app.ts` file.
```shell
$ deno run app.ts
```
You should see the following output:
```
Map(1) {
0 => { id: 0, item: 'world', searchTerm: 'hello', searchInput: 'hel' }
}
```
### Quickstart: Browser
1. Create your `index.html` file.
```html
Moogle
Open up your console to see Moogle working.
import { Moogle } from "https://unpkg.com/@drashland/moogle@1.0.0/lib/esm/Moogle.js";
const service = new Moogle();
service.addItem(["hello"], "world");
console.log(service.search("hel"));
```
2. Open your `index.html` file so that it opens up in your browser and open up
the console to see Moogle working.
## Advanced Tutorial: Creating A Search Form
In this tutorial, you will create a search form where you can type in search
inputs into a search field and see the results in a results field.
1. Create your `index.html` file with the search and results fields. _Note: This
file uses Tailwind CSS to make the UI look better._
```html
Moogle
Moogle
Search
Try the following searches: one, two, red, blue, fish, sh, ish, ue, ed
Results
[]
```
2. Add the following script before the closing `