Setting the number of search results displayed per page on Algolia autocomplete can be done by

According to the documentation on autocomplete, it mentions the following about hits:

Hits

To create a source based on Algolia's hits array, simply use:

{
  source: autocomplete.sources.hits(indexObj, { hitsPerPage: 2 }),  
  templates: {
    suggestion: function(suggestion, answer) {
      // FIXME
    }   
  }
}

However, I am unsure about the purpose of the indexObj. I have an instantsearch instance with three indexes, but passing any index leads to the following error:

autocomplete.min.js?_=1494237458641:7 Uncaught TypeError: Cannot read property '_ua' of undefined

While passing indexObj results in:

Uncaught ReferenceError: indexObj is not defined

I aim to limit the number of results displayed, and I believe passing the source should help achieve that, but I am unable to grasp how to pass it.

javascriptautocompletealgolia

Answer №1

It turns out that although @rishipuri's answer was correct, it didn't fully apply in my case due to the use of multiple indexes. Nevertheless, it prompted me to revisit the documentation, where I came across the following:

autocomplete('#aa-search-input', {}, [
    {
      source: autocomplete.sources.hits(players, { hitsPerPage: 3 }),
      displayKey: 'name',
      templates: {
        header: '<div class="aa-suggestions-category">Players</div>',
        suggestion: function(suggestion) {
          return '<span>' +
            suggestion._highlightResult.name.value + '</span><span>'
              + suggestion._highlightResult.team.value + '</span>';
        }
      }
    },
    {
      source: autocomplete.sources.hits(teams, { hitsPerPage: 3 }),
      displayKey: 'name',
      templates: {
        header: '<div class="aa-suggestions-category">Teams</div>',
        suggestion: function(suggestion) {
          return '<span>' +
            suggestion._highlightResult.name.value + '</span><span>'
              + suggestion._highlightResult.location.value + '</span>';
        }
      }
    }
]);

I also noticed the importance of including hitsPerPage in the source definition.

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

Refreshing various innerHTML elements using a universal function

I'm attempting to consolidate several similar functions into one, but I'm encountering some challenges. Below is an example of one of the original functions that is called by a button press: function ADD_ONE(Variable_Name){ Variable_Name += ...

javascriptinnerhtml

AngularJS does not allow data to be deleted in mongodb

Backend code: var User = require("./models/user"); var express = require('express'), app = express(), Account = require("./models/account"), mongoose = require('mongoose'), passport = require("passport"), basicAuth = require('basi ...

javascriptangularjsmongodb

When a form added by jQuery is submitted, the associated JavaScript does not run as expected

After clicking a button on my page, jQuery removes one form and replaces it with another. However, when I try to submit the second form, the associated JavaScript does not execute as expected. Instead of running the JavaScript function, the form submissio ...

javascriptjquery

Error: The current component does not have a template or render function specified. Check the <App>

I am a beginner in Vue js and I am facing an issue while running my application. It is showing an empty page with the error message: Component is missing template or render function. at <App>. Additionally, there is also a warning from Vue Router sa ...

javascriptvue.js

Improve your JavaScript form by implementing a time loading feature!

I am currently developing a sign-up form using native JavaScript and Ajax. The form utilizes an Ajax function to transmit data to a PHP engine, which then performs database queries. My main concern is implementing a loading function in JavaScript that can ...

javascriptphpajax

Top method for displaying loading popup using $http

As a newcomer to Angular, I am curious to know if it's possible to achieve the following scenario and also where I can find documentation to help me get started. The scenario: In my MEAN app, there is currently a 'loading...' popup controll ...

javascriptjqueryangularjs

Creating a unique shader in Three.js to seamlessly blend with the default rendering algorithm

Looking to improve performance, my goal is to showcase hundreds of moving tetrahedrons in a scene by using instancedbuffergeometry along with a custom shader. Within the scene, there are also objects with regular geometry (non-buffer) and some lights. To ...

javascriptthree.jsglslfragment-shaderbuffer-geometry

Using jQuery to find duplicated records within two JSON object arrays

Here is the structure of my first Json Array: [ {"Invent":"4","Beze":"256","mail":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f7f4f5d6f7f4f5b8f5f9fb">[email protected]</a>"}, {"Invent":"4","Beze":"2 ...

javascriptjqueryangularjsjson

What's causing jQuery to make the entire page malfunction?

I am experiencing an issue where a function is not recognized as being in scope when I have a reference to jQuery defined. Oddly enough, if I comment out that reference, the function call works just fine. I have other pages set up the same way with jQuer ...

javascriptjqueryhtml

calculation of progress bar advancement

I want to make the progress bar in my game responsive to changes in the winning score. Currently, it moves from 0% to 100%, which is equivalent to 100 points - the default winning score. But I need the progress bar to adjust accordingly based on the user-i ...

javascripthtmlcssprogress

JavaScript Regular Expression Assistance Domain Snatcher

I am in the process of developing a JavaScript Regex and I am struggling to find the right pattern to match a specific domain. Let me provide an example for better understanding. I need a regex that can identify any domain that exclusively contains (text. ...

javascriptregex

The functionality of making Slim POST requests is currently not functioning as expected within the Ionic

An issue is arising with my app that makes calls to a REST API using POST and GET methods. The app I'm developing with Ionic works perfectly when emulated using the command: ionic serve --lab However, when running the app on an actual device, calls ...

javascriptphpangularjsionic-frameworkslim

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

I've been attempting to export a variable in the TensorFlow posenet model while it's running in the Chrome browser using the code snippet below. After going through various discussions, I discovered that exporting a variable with fswritefile in t ...

javascriptnode.jstypescripttensorflowtensorflow.js

How can you temporarily stop an event with a click or touch, and then resume the event's state after performing certain tasks in jQuery?

Exploring options for tracking clicks with precision - interested in finding a way to defer the event propagation until a certain function completes. Any suggestions on an alternative approach or how to effectively delay the normal event flow? $(this).on ...

javascriptjquery

Encountering an error of "undefined is not iterable, cannot read property Symbol(Symbol.iterator)"

While learning React through coding, I encountered an error (Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)). I am unsure where the problem lies. Any suggestions? When utilizing useEffect to activate setFiltere ...

javascripthtmlreactjsreact-hooksuse-state

What steps do I need to take to implement a unique second factor of authentication using Firebase?

Looking to enhance the security of my application, I aim to offer my users the option to implement a second factor of Authentication. Currently, I am utilizing Firebase for user logins and registrations, which supports a second factor through SMS verificat ...

javascriptreactjsfirebaseexpressfirebase-authentication

Error encountered in Typescript: SyntaxError due to an unexpected token 'export' appearing

In my React project, I encountered the need to share models (Typescript interfaces in this case) across 3 separate Typescript projects. To address this, I decided to utilize bit.env and imported all my models to https://bit.dev/model/index/~code, which wor ...

javascriptnode.jstypescriptbabeljs

Unable to organize list of entities based on numerical values

I am working with an array of objects structured like this: [ { "value": 351.68474, "o_p": [ "$.text" ] }, { "value": 348.0095, "o_p": [ ...

javascripttypescript

Escape from the abyss of callback hell by leveraging the power of Angular, HttpClient, and

I'm currently grappling with understanding Angular (2+), the HttpClient, and Observables. I'm familiar with promises and async/await, and I'm trying to achieve a similar functionality in Angular. //(...) Here's some example code showca ...

javascriptangulartypescriptpromiseobservable

Node.js redirection techniques

Node JS is still very new to me and I'm having trouble redirecting buttons to another page. Every time I attempt to redirect, I receive a "cannot GET /(the page that I am trying to redirect to)" error message. The code snippet I'm using for redir ...

javascriptnode.jshttp-redirect