Create a table with alphabetical sorting and search - javascript

I wants to create a table (with alphabetical filter and search) like this(example). In which by clicking on any alphabet table shows name that started with only that alphabet. And also have a search option.
I have searched a lot on google but couldnt find table like that. Any one have any idea how i can get that table.

On both letter click and search events, you should run a JS filter function on your data set and display only the relevant data.
A naive example of a filter function:
function filterByProperty(data, prop, searchString) {
return data.filter(function(singleObject) {
return singleObject[prop].indexOf(searchString) === 0;
});
}
var dataSet = [
{
name: "Amanda",
company: "Google"
},
{
name: "Johnny",
company: "Facebook"
},
{
name: "Max",
company: "Go Daddy"
}
];
// Will return a collection containing the first and third objects in dataSet.
var filteredData = filterByProperty(dataSet, "company", "G");

It used a plugin called: DataTable, you can follow the guide here to make your own alphabet search.
https://www.datatables.net/blog/2014-08-26
No enough reputation to comment, so...

From Chrome Developers(Press F12 -> click on Network tab & reload the page) tool
I see dynamic-table.js(not sure if this is library or custom file ) &
jquery.dataTables.jsis used. So you can take a look into these library

I have found solution of my problem through the link provided below.
SOLUTION IS HERE
Note : In this solution only alphabetical filter is available, search feature is not there. Search feature was not that important to me, so I am fine with only alphabet filter.

Related

Dialogflow composite entity parameter is undefined when it shouldn't be

Long story short, I'm making a real estate agent chatbot and I just implemented a filter allowing the user to search within a range of numbers (e.g. at least one bedroom, under $2500). In order to do this, I made an entity_range composite entity composed of the range type (e.g. at most, exactly) and the entity itself (unit-currency for price, plus some custom entities like the number of bedrooms). Prior to creating entity_range, the entities themselves worked fine. But now, it seems as though the entity part of entity_range is undefined. See a sample of my code below:
function get_count(req, res) {
console.log("price: " + req.queryResult.parameters["entity_range"]["unit-currency"])
var price, beds, baths, num_filter_funct
if(req.queryResult.parameters["entity_range"]["unit-currency"] != undefined) {
price = req.queryResult.parameters["entity_range"]
console.log("price: " + price)
} else {
console.log("could not find parameter")
}
Before creating entity_range, my code looked exactly the same, except without ["entity_range"] between parameters and ["unit-currency"]. Anyway, this code logs:
price: undefined
could not find parameter
after the input "How many for $2500," with the following diagnostic info:
...
"queryResult": {
"queryText": "how many for $2500",
"parameters": {
"entity_range": [
{
"unit-currency": {
"amount": 2500,
"currency": "USD"
}
}
]
}...
So the entity "unit-currency" is recognized by Dialogflow, but not by my program. entity_range does allow users to not specify a range, so that's not the issue:
see screenshot here.
I would greatly appreciate any advice you have to offer!
That JSON shows entity_range being an array instead of an object. an object.
parameters.entity_range[0][“unit-currency”] should work. Note the [0]. You’ll also want to add some checks before this to make sure enitiy_range exists and it’s length is > 0.
And this part is just a guess but perhaps you mistakenly clicked the “Is List” box for this parameter in dialogflow? I’m checking it would probably make it be an object instead of an array and your existing code would work.

Algolia Search and Nested Array

I am working on a search application that uses algolia for indexing. When the user types a search term into the text input box, we want to populate the autocompletion dropdown with events. Every event belongs to an event category as well.
Example:
{
"category": "Disney",
"events": [
{
"title": "Ice Skating"
},
{
"title": "Peter-Pan"
},
{
"title": "Roller Skating"
}
]
}
If someone searches for "skating", we want to pull back the parent category and the child events "Ice Skating" and "Roller Skating" but omit the "Peter-Pan" event.
Is this type of nested filtering possible with Algolia? If so, how would the filtering work? Would it need to be done with JS, will Algolia handle it for me or do we need to create separate indexes for Event Categories and then Individual Events?
Thanks!
Yes, Algolia will automatically filter out Peter Pan and return items with Skating.
As an example I've got some data setup like so:
announcements: [
{
id: ..,
..
author: {
id: ..,
name: 'Preston',
..
}
},
..
]
If I search Announcements for Preston it'll return any announcement that has Preston in the author attribute. This is the default for Algolia and will search the entire record for your search term. This can be slow.
You can go into the Algolia dashboard, or with the API, and under your index's Ranking tab define what you want to search by and ignore.
The first thing you need to do is adding events.title to the searchable attributes. This will make sure that when the end-user types skat, it will match one of the title.
Then you can check what parts of each result is matched using _highlightResult and more specifically filtering based on the matchLevel:
full is when you have a match and none is when you don't.
This filtering should be possible in JS, in the template you use to display the results.

AngularJS filter in certain fields with "OR" condition

I have an issue with AngularJS filters.
I wan't to "filter" with one input search box, but to make list filtered with multiple fields with "OR" condition.
Here, is a demo.
http://jsbin.com/wodewexetu/2/edit
I wan't to filter the list with only name and description fields.
If I type: "hello", "world", or "angular" it should not return any result.
If I type: "example", it should return only 1st and 3rd rows.
If I type: "description" it should return only 1st and 2nd rows. and etc.
So in general, I want to filter with one name, multiple, but certain fields in list with "OR" condition.
I was able to make the "AND" condition, but it's not what I need.
I also searched a lot about this topic, but unfortunately, non of those codes and examples worked for me.
Please, help and thanks in advance.
You can create your own custom filter, and apply whatever functionality you want.
In your case, something like:
app.filter('customFilter', function() {
return function(items, search) {
if (!search) {
return items;
}
var searchItems = new RegExp(search.split(' ').join("|"), "i");
return items.filter(function(item) {
return searchItems.test(item.name) || searchItems.test(item.description);
});
};
});
See it working here.
I think OR filters are not supported yet. I solved it by creating a meta propery called $searchable.
angular.forEach($scope.items, function (item){
Item.$searchable = [item.name, item.description].join (' ');
}
In the html:
<input type="text" ng-model="search.$searchable">

How to search effectively and fastly when we have 50,000 of JSON Data?

I have a json data like as follows
var data=[
{
Name: "AAA",
Phone : "1"
},
{
Name: "BBB",
Phone : "2"
},
|
|
|
|
|,
{
Name: "Z50000",
Phone : "50000"
}
]
I am searching for records that contains specific keyword (either name / phone). I am using javascript for that. I tried following way
var searchKeyword=document.getElementById("txtSearchKeyword").value;
var searchData=new Array();
for(var i=0;i<data.length;i++){
if(data.Name.index(searchKeyword) !=-1 || data.Phone.index(searchKeyword) !=-1){
searchData.push(data[i]);
}
}
Everything is working fine, but it is taking a noticeable amount of time. How can search efficiently and fastly when we have big amound of data ?
Aside from what Hayes mentioned with utilizing regex, if your data is sorted (as it seems) you could use a binary search. This should run in O(log n) time but someone correct me if I'm wrong.
for example:
while not found
compare middle of data array with what you are searching
if they match, return
if what you are searching is > midpoint, call recursively on middle of last half
else recursively call on middle of first half of array
Edit: turns out I misread the question. I'm leaving the code sample up in case someone find this in a google search and wants to search an array of jsons

Searching through objects in Javascript

I have my data structured like this:
participants['John Smith'] = {first_name: 'John', last_name: 'Smith', id: '1'}
Now I have autocomplete input boxes where the participants can just type their first names and then their last names in.
Right now what I do is I have a separate structure to house the first names, another one to house the last names. This is also because Bootstrap's Typeahead needs a "source" so I just put source: first_names.
So basically what happens is that the user types in the first few letters of his name and they can autocomplete, then they select the first few letters of the last name and they can autocomplete, and if their first names and last names match then I would autocomplete the rest of the form. (Right now I'm assuming there are no duplicate names).
I was wondering if I am doing the right thing because it seems too excessive. It works, but is there a better way?
You can overload typeahead's methods to do what you need when it searches for a match, below is a basic code example.
So in your case, you can autocomplete the last name if the first name is a single match (and the rest of the form if you think that makes sense, I personally don't)
You could also use the full name as a single entry field and autocomplete both I guess.
$('#searchBox').typeahead(
{
source: function (query, process) {
process(theArrayToProcess);
},
updater: function (item) {
callAFunctionToDoSomethingWithMatchedItem(item);
return item;
},
matcher: function (item) {
if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
return true;
}
},
sorter: function (items) {
return items.sort();
},
highlighter: function (item) {
var regex = new RegExp( '(' + this.query + ')', 'gi' );
return item.replace( regex, "<strong>$1</strong>" );
},
});
So I was checking out Underscore and I stumbled into Lodash. I solved it:
_.uniq(_.pluck(stuff.participants, 'first_name'))
_.uniq(_.pluck(stuff.participants, 'last_name'))
and stuff to that effect. Thanks everyone. I used underscore before but I forgot about it. Guess you really need to code everyday to retain info.
Re: duplicate naming I have to think about it. Last year there was 200 participants, good thing nobody shared the same name. Backend has a unique constraint on 'first_name' and 'last_name'.

Categories