How to display result order number next to result?

Hi I am looking to display a number next to my results as:

  1. Result #1
  2. Result #2
    .
    .
    etc.

I’ve made a JSON file where I use the {{{name}}} to display those JSON variables, but since this would be dynamic, is there some sort of variable I can call that would display this for me built in to instantsearch.js?

Also here’s my hits widget, it returns a lot of data in the item: section. Is there a better way to format this? Or maybe set item to a variable and that variable is the HTML formatted section I’d like a render? Everything on one line is more difficult to deal with. Thank you!

search.addWidget(
            instantsearch.widgets.hits({
                container: '.indi-song-search',
                templates: {
                    empty: 'No results',
                    item: "<div class='song-number'>{{{count}}}</div><div><i class='icon ion-ios-play' id='bodyPlayBtn' ></i><i class='icon ion-ios-pause' id='bodyPauseBtn'></i></div><div class='track-title'><a href='#'>{{{track}}}</a><span class='feat-artists'> - <a href='#'>Pusha T</a></span></div><span class='track-artist'><a href='#'>{{{artist}}}</a></span><span class='album-title'><a href='#'>{{{album}}}</a></span><div class='song-duration-container'><div class='song-duration'>3:11</div></div><div class='bpm-duration-container'><div class='bpm-tag'>135</div></div><div class='download-icon-container'><i id='download-song-btn' class='icon ion-android-download' onclick='openCreditsModal()'></i></div>"
                },
                cssClasses: {
                    item: 'indi-song'
                }
            })
        );

Hey there.

You should be able to use __hitIndex, https://community.algolia.com/instantsearch.js/v2/widgets/hits.html#struct-HitsTemplates

Have a nice day!

I’m going to do some searching, but the index obviously starts at 0, any way to have it start at 1? Thanks so far!

Hi @jordan,

You could use a function to render your item, like https://jsfiddle.net/j9nwpz34/28/ or you can use transformData to compute it and use it into your item template (https://jsfiddle.net/rpupz0ev/1/). Would that work for you?

1 Like

hi @marielaure.thuret ! very helpful :slight_smile: I think I read somewhere that jquery manipulation is not possible at this time? I am trying to get the ‘ion-ios-play’ icon to display (set to display: none on page load) when a cursor enters the div with no luck, this jquery works for my site (removing the .ais-hits–item class of course) on other pages besides when it is rendered by Algolia:

$(".ais-hits--item.indi-song").mouseenter(function () {
    $(this).find(".ion-ios-play").show();
});

var searchHits = instantsearch.widgets.hits({
    container: document.querySelector('.indi-song-search'),
    hitsPerPage: 3,
    templates: {
        item: function (data) {
            const position = data.__hitIndex + 1;
            return '<div class="song-number">' + position + '</div><i class="icon ion-ios-play music-control"></i><div class="track-title"><a href="#">' + data.track + '</a><span class="feat-artists"> - <a href="#">' + data.featuredartist + '</a></span></div><span class="track-artist"><a href="#">' + data.artist + '</a></span><span class="album-title"><a href="#">' + data.album + '</a></span><div class="song-duration-container"><div class="song-duration">' + data.duration + '</div></div><div class="bpm-duration-container"><div class="bpm-tag">' + data.bpm + '</div></div>'
        }
    },
    cssClasses: {
        item: 'indi-song'
    }
});

Hey @jordan, could you provide a code sample showing the isssue? :slight_smile:

Hey @marielaure.thuret! The post above had the specific code snippet that displays the play button via jquery along with the Algolia widget that’s generated. This is what does not work properly, what else would you like for me to provide, would be happy to do so!

I was just expecting it under one of the jsfiddle I gave you as it’s related to your index :slight_smile:

@marielaure.thuret gotcha. Took a little bit of time to get everything showing, but here’s a js fiddle: https://jsfiddle.net/oom5e9qv/

Hey @jordan, you can use the render event to add those kind of things.

instantsearch.on('render', function(){
    $(".ais-hits--item.indi-song").mouseenter(function () {
    		$(this).find(".ion-ios-play").show();
    });
});

@marielaure.thuret perfect!! Thank you so much, only thing I had to change was search.on instead of instantsearch.on but it renders as expected now. I really appreciate the help :slight_smile: