We Keep Coding

Customising Algolia instantsearch searchbox and results

I am building a service that uses Algolia instantsearch.js to display search results.
Starting the project I created a template where I displayed our customers in a table. Then I wanted to add the functionality that the contents of the table change while a user is typing for a specific customer info (ex. mobile number). This is why I used Algolia and instantsearch.js to achieve this.
I managed to have it working but I have a problem with styling the whole thing:
The searchbox and hits widgets (where the results are displayed) are added to the DOM with a specific HTML/CSS structure:
Searchbox:
<!- Input field -->
<input autocapitalize="off" autocomplete="off" autocorrect="off" placeholder="Search for customers.." role="textbox" spellcheck="false" type="text" value="" class="ais-search-box--input">
<!- Algolia Powered by logo -->
<span class="">
<div class="ais-search-box--powered-by">
...
<a class="ais-search-box--powered-by-link">...</a>
</div>
</span>
<!- Search magnifier icon -->
<span class="ais-search-box--magnifier-wrapper">
<div class="ais-search-box--magnifier">...</div>
</span>
<!- Clear search icon -->
<span class="ais-search-box--reset-wrapper" style="display: none;">
<button type="reset" title="Clear" class="ais-search-box--reset">...</button>
</span>
Hits:
<div class="ais-hits">
<div class="ais-hits--item">
First customer data (all of them)
</div>
<div class="ais-hits--item">
Second customer data (all of them)
</div>
<div class="ais-hits--item">
Third customer data (all of them)
</div>
<div class="ais-hits--item">
First customer data (all of them)
</div>
</div>
Trying to work with these results it's frustrating since I have my HTML/CSS code ready (search field and table for results is designed to match the look and feel of the rest of the website).
What i want to get back from search is a response that i can use and add data in the correct place. For example now i am trying to populate the with the customer's data but i can't:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr id="hits"></tr>
</tbody>
</table>
Below is the template I use:
<script type="text/html" id="hit-template">
<td>#{{ name }}</td>
<td>#{{ surname }}</td>
<td>#{{ email }}</td>
<td>#{{ mobile }}</td>
</script>
I am adding # in front of the value since I am using Laravel and blade template.
What i get is a table with all data from all customers in the first . Only one table row is created.
In JS code I use the following:
var search = instantsearch({
appId: 'my-app-id',
apiKey: 'my-search-only-api-key',
indexName: 'my-indices',
urlSync: false,
searchParameters: {
hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.searchBox({
container: '#searchbox',
placeholder: 'Search for customers..',
poweredBy: true,
wrapInput: false
})
);
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
search.start();
Is there a way to just get a JSON response from instantsearch instead of a widget? I dont want to go down the server site route, since this is the whole point of instantsearch.js.
If I cant get back simple JSON response, what do I have to do to change the layout of the widgets. Override all ais classes?
Thanks in advance!

You can't have a full control of what is render with the widget API. But there is another API called connectors. This one lets you create a custom rendering without reimplementing the core logic of the widget. You can take a look at this API on the documentation.

Regarding AngularJS and datatable combination

First and foremost, hello! I'm new here.
I've been recently learning AngularJS and web development as I'm working so I apologize for my newbieness. I had stumbled upon a wall of sorts regarding datatable integration with AngularJS. Here's the structure of it:
<table class="datatable table table-hover">
<thead>
<tr>
<th ng-repeat="column in columns">
{{column.name}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="form in forms | filter : {userName : activeFilter['user name']|rangeDate:activeFilter['range begin']:activeFilter['range end']:'birthDate'">
<td class="row-md-1">
<span ng-model="approvedForm.userName">
{{approvedForm.userName}}
</span>
</td>
<td class="row-md-1">
<span ng-model="approvedForm.birthDate">
{{approvedForm.birthDate}}
</span>
</td>
</tr>
</tbody>
</table>
I've to mention I make use of the filters on the client side, so they can choose the correct rows. The problem was that upon filtering some users and row-sorting with datatable, the data would get misteriously duplicated on the view, and I couldn't delete it or whatsoever. To solve it I had to take out the ng-repeat filters and filter with datatable filter support. Does anybody know what might have caused this behaviour?
Btw I'm using angularJS 1.x and datatable 1.10
Thanks!

Your data is duplicating because you bind it twice as the attribute of the HTML element and with handlebars. Remove either ng-model="..." attribute or {{...}} in your code so it would look like this:
<span>
{{approvedForm.userName}}
</span>
as #Shaishab Roy mentioned ng-model is not supposed to work with <span> so try ng-bind instead:
<span ng-bind="approvedForm.userName"></span>

ui-grid: trigger sorting in custom header template

I use the following in order to implement custom column headers for my grid:
<div role="columnheader">
<table class="table-header-rotated">
<theader>
<tr>
<th class="op-table-group-heading rotate-45">
<div class="op-table-group-heading-title rotated-container"
ng-class="{inclined : col.headerCellClass}">
<span>{{col.headerCellClass}}</span>
</div>
</th>
</tr>
<tr>
<th class="op-table-asset-heading rotate-45">
<div class="rotated-container colt{{col.uid}}">
<span>{{col.displayName}}</span>
</div>
</th>
</tr>
</theader>
</table>
</div>
However, clicking on this header does not trigger any change to the sorting. A (probably outdated) article in the wiki suggests to use col.sort() in order to do so. However, doing this fails with v2.sort is not a function.
I have looked at the source code for the current default header templates in ui-grid 3. However, I can find no ng-click in it that would trigger the sort event, so I can only assume they are binding their click listeners somehwere else.
How do I go about enabling sorting in my custom template?

Alright, so after dissecting the original template, it seems that the one crucial component needed to trigger sorts when clicking the header is ui-grid-cell-contents class. Thus, the minimum header template that can be used for sorting is simply <div class="ui-grid-cell-contents"></div>

Vue js and Data Table Panigation not Working

Ok, so unfortunately I have come across this issue. So first a little about specs of my app.
I am using
Vue.js
vue-resource.js
jQuery
jQuery DataTables
Now because I'm grabbing the data through vue-resource, for some reason when the ajax call is final finished and vue imports the data to the table, datatables decides not to render pagination, and displays all 200 results on one page. Is there anyway to refresh datatables so it is rendered with pagination after it has been imported into the table?
My ajax call:
this.$http.get('getDispachedEmails', function(data){
console.log(data['orders']);
this.customers.push(data['orders']);
var dt = $('#myTable').DataTable();
});
My Table:
<table id="myTable" class="u-full-width">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr v-repeat="customers[0]">
<td>#{{ firstName }} #{{ lastName }}</td>
<td>#{{ email }}</td>
<td>#{{ trackingNumber }}</td>
<td>#{{ address }}</td>
</tr>
</tbody>
</table>
EDIT
I have found out that none of the functions work. If i try to select any row, the table is instantly cleaned. My model (vue model) still has all the objects inside.
SOLUTION:
I just set a wait time to initiate data tables after I collect the data via ajax request. It's a little ghetto, but a least it works. If I find a better fix Ill edit this post.
this.$http.get('getDispachedEmails', function(data){
console.log(data['orders']);
this.customers.push(data['orders']);
setTimeout(function(){$('#myTable').DataTable();}, 5000);
});

A delay of 0 did the trick for me, although not sure why.
setTimeout(function(){$('#myTable').DataTable();}, 0);

I've built a dedicated vue grid component: vue-tables . You might want to check it out.

angular JS endlesslist and search functionality?

I am new to angularJS i have an object of which contains nearly 4000 records which i am showing them using ng-repeat
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<li ng-repeat="outlet in outlets | filter:searchText" >
<table>
<tr>
<td>
<div clss="title">{{outlet.name}}</div>
<div class="discription">{{outlet.address}},{{outlet.cityName}},{{outlet.countyName}}</div>
</td>
</tr>
</table>
</li>
</div>
now i wanted to use endless list by using ng-infinitescroll but the problem is the filter is happening only which are visible not in total 4000 records so what do i have to implement to get the search functionality to be done in total 4000 records and endless list

searchText filter would only work on in-memory data. In order to search things that havent been loaded yet you would need to implement a server-side search api.