How should we provide the search query and options when using fuse.js in an Angular application?

Having previously utilized fuse.js in a JavaScript project, I am now navigating the world of Angular. Despite installing the necessary module for fuse.js, I'm encountering difficulties implementing its search functionality within an Angular environment.

Although I attempted to follow the provided documentation, I remain uncertain as to how the code actually incorporates the search keyword.

Explore the angular-fusejs npm package here

<ul>
  <li *ngFor="let element of (DataJSONobject | fusejs:searchString:{keys: ['name', 'author']})">
    {{ element.author.firstName }}
  </li>

</ul>

//In Javascript file//
var fuse = new Fuse(newData, options);
var sresult = fuse.search(searchValue);
console.log(sresult);

I am seeking assistance in adapting the existing JavaScript code into Angular for seamless integration.

javascriptangulartypescriptangular8fuse.js

Answer №1

It seems like a while has passed since this question was asked, but I'll share how I managed to make it work. Essentially, following the instructions provided in the documentation.

npm i fuse.js

component.html
<div class="row">
  <div class="input-field col s12 m4">
    <input id="fuzzy-player" type="text" (input)="search($event)">
    <label for="fuzzy-player">Search...</label>
  </div>
</div>

//displaying results
<div id="search-results" class="row left">
  <div class="collection col s12" 
       [ngClass]="fuseResults && fuseResults.length > 0 ? '' : 'hide'">

    <ng-template [ngIf]="fuseResults && fuseResults.length > 0">
//showing top 5 results but can be changed to "let i of fuseResults"
      <a class='collection-item sortable' *ngFor="let i of [0, 1, 2, 3, 4]" (click)="filteredSelected($event)">
        {{ fuseResults[i].name }}
      </a>
    </ng-template>
  </div>
</div>
<div style="clear: both"></div>


component.ts
import * as Fuse from 'fuse.js'
...
export class Component implements OnInit {
  public fuse: any;
  public fuseResults: any[];

  ngOnInit() {
    //instantiate Fuse with your object and options
    this.fuse = new Fuse(list, options);
  }

  //binding to the HTML input element
  public search(evt: KeyboardEvent): void {
    const target = evt.target as HTMLInputElement;
    this.fuseResults = this.fuse.search(target.value);
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to input a dynamic post array in PHP?

Explaining this might be challenging, but I will do my best. I have multiple input posts with custom conditions, which means there can be as many custom conditions as needed. Here is the HTML: <input name="type[]" value="type 1"> <input nam ...

javascriptphpjquerymysqlarrays

Utilizing React Recharts to create personalized tooltips

In my current project, I am looking to create a custom tooltip to replace the default one in recharts. The default tooltip that I want to change is shown below: https://i.stack.imgur.com/TjTiL.png I would like the new custom tooltip to look like this: ...

javascriptreactjsmaterial-uirecharts

Tips for sending two values to a PHP file using JavaScript Ajax

I have created a code for two dropdown menus. The goal is to select values from both menus and send them to a php file using the GET method. The values should be sent to the php file only when both menus have selections made. Below is the code snippet: ...

javascriptphpjqueryhtmlajax

Pause a YouTube video automatically when the window is not in focus using FancyBox

I have successfully implemented dynamic play/pause functionality for a YouTube video, as demonstrated in my weave. However, I am facing challenges in making it work dynamically with FancyBox using the onBlur event (to pause the video when the window is no ...

javascriptjquerydynamicyoutubefancybox

Utilizing SCSS variables

Currently, I am in the process of developing an Angular 4 application using angular-cli and have encountered a minor issue. I am attempting to create a component that has the ability to dynamically load styling. The ComponentX component needs to utilize a ...

angulartypescriptangular-cli

Create a bespoke AngularJS directive for a customized Twitter Bootstrap modal

I am attempting to create a unique custom Twitter Bootstrap modal popup by utilizing AngularJS directives. However, I'm encountering an issue in determining how to control the popup from any controller. <!-- Uniquely modified Modal content --> ...

javascriptangularjstwitter-bootstrapangularjs-directive

Having difficulty linking a click event to an Anchor tag within a React component

Here is the code snippet for ComponentA.js: This is the return statement inside the component return ( ...... <a id="MytoolTip" ...... <ComponentB content={ ` <div class="share_cart_tt ...

javascriptreactjsdom-events

The PrimeNG p-datatable is failing to detect the template that was given

In one of my scenarios, I have a table with varying numbers of rows and columns. Unfortunately, I do not have any information about the header names for this table. To tackle this issue, I have implemented the following approach: Firstly, I obtain the re ...

angularprimengprimeng-datatable

Unravel JSON using JavaScript on the web

I encountered an issue while running this code and trying to decode it: var data = JSON.parse({"forms":[{"url":"example.com/example","name":"example"}]}) document.getElementById("name").innerHTML=data.forms.name Instead of the expected value, the returne ...

javascriptjsondecode

Angular.js fails to load successfully every other time

My angular application is running into some issues with bower. At times, when I start up the server, I encounter the following error: Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to in ...

javascriptjquerynode.jsangularjstwitter-bootstrap

Switching from the HTTPS to HTTP scheme in Angular 2 HTTP Service

I encountered the following issue: While using my Angular service to retrieve data from a PHP script, the browser or Angular itself switches from HTTPS to HTTP. Since my site is loaded over HTTPS with HSTS, the AJAX request gets blocked as mixed content. ...

httpangularhttps

Importing JSON data into JavaScript

For the past few hours, I've been attempting to load a JSON file into JavaScript to feed map coordinates to the Google Maps service. Unfortunately, my script is incomplete and I cannot obtain any results. Here's what I have so far: <script&g ...

javascriptjson

Fix for sorting issue in Angular 4.4.x mat-table header

I am facing an issue with my mat-table sorting header. I have followed the examples and decorated the columns accordingly: <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell> & ...

angularangular-material

Creating a custom `onSubmit` function with Formik, TypeScript, and hooks can be a powerful way

I'm currently creating form onSubmit functions utilizing the useCallback hooks specifically designed for use with the formik library. A sample structure of my component using formik would be as follows: import { useContactForm } from './useCon ...

reactjstypescripttypescript-typingsformik

Ajax undoes any modifications enacted by JavaScript

When using ajax, I trigger an OnTextChangedEvent. Before this event occurs, there is a Javascript function that validates the input field and displays text based on its validity. However, once the Ajax is executed, it resets any changes made by the Javascr ...

c#javascriptasp.netajax

Numerous criteria for selecting a checkbox

I am working with a student database table called student_db, which looks like this: Name Gender Grade City John Male 2 North Dave Male 4 North Garry Male 3 North Chirsty Female 5 East Monica Female 4 East Andrew Male ...

javascriptphpjquerymysqlhtml

Conceal and Reveal every marker on the map

Creating a map using angular to display data on the web page and Google Map is my current project. This is my first major project utilizing Angular, and I have nearly achieved the functionality as planned. I am eager to enhance the site with more user-fri ...

javascriptangularjsdictionarygoogle-maps-api-3markers

What is the best way to display JSON within a partial?

Within my Rails app, I have implemented a JavaScript graph. Whenever I click on a circle in the graph, it displays the name of the corresponding user. Now, my goal is to retrieve additional information from the related database table based on this user&apo ...

javascriptjqueryruby-on-railsjson

The value returned is undefined when using getStaticProps

Recently, while working on my project with Next.js, I encountered an issue where I was trying to access data but kept getting undefined. Below is the code snippet that I was working with: function Home({books}) { console.log(books) return <div>Home ...

javascriptreactjsnext.js

Utilizing Weather APIs to fetch JSON data

Trying to integrate with the Open Weather API: Check out this snippet of javascript code: $(document).ready(function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { $(".ok").html("latitude: " + ...

javascriptjson