Metronic QuickSearch not working #6486

6 Answer(s)

• 

  0

  ryancyq created 5 years ago

  Support Team

  Hi, please share your ANZ project version, is it angular or jquery?

  Save Cancel
• 

  0

  system15 created 5 years ago

  Hi there the angular project and version is: ASP.NET CORE & Angular (single solution) .NET Framework 4.6.1 v5.3.0

  Save Cancel
• 

  0

  ismcagdas created 5 years ago

  Support Team

  AspNet Zero doesn't contain quicksearch.js file which is required for this feature. You can download latest Metronic, add "theme\default\src\js\framework\components\general\quicksearch.js" to your solution and then add it to scripts of angular.json file.

  Save Cancel
• 

  0

  system15 created 5 years ago

  I already have that reference included in the project directory using webpack file "MyProject.Host\src\assets\metronic\src\js\framework\components\general" I had to add [(ngModel)]="searchFilterText" to the element that I wanted it to work on because the quicksearch.js javascript is trying to make an ajax call to the endpoint and because the bearer token is not provided I get a 401 unauthorized.

  Summary of what I've done for clarity so far:

  1. Added [(ngModel)]="searchFilterText" to the search input field.
  2. In the type script file for that html template e.g. header component.html, header.component.ts handle the search term value for processing using keyup.enter on the search element.
  3. Here is the search element below:

  <input autofocus #search (keyup.enter)="onEnter(search.value)" [(ngModel)]="searchFilterText" id="m_quicksearch_input" autocomplete="off" type="text" name="searchFilterText" class="m-list-search__form-input" value="" placeholder="Search...">

  So I can talk to the endpoint using step 3 above.

      /// <summary>
      /// Process the search term provided when the enter key is pressed on the input field.
      /// </summary>
      /// <param name="searchTerm">The search term.</param>
      onEnter(searchTerm: string) {
          if (searchTerm != null || searchTerm != undefined) {
              //Get client info.
              this.getData(searchTerm.trim());
          }
      }
  

  What is your thoughts on using this solution?

  Save Cancel
• 

  0

  ismcagdas created 5 years ago

  Support Team

  Hi,

  You can get the token uisng abp.auth.getToken() and add it to your request header. If you can't manage to do it, please share teh code for this.getData.

  Save Cancel
• 

  0

  system15 created 5 years ago

  Ok thanks

  Save Cancel