Search lists of the whole data while using ionic infinite scroll

ionic-v1
1

Hi, I wonder how can I get all of the data from the database, when I have a search input text, repeater and ionic infinite scroll. at the beginning the search text only search what the infinite scroll return which is limited. how can I search from the whole data (not from the limited lists returned by the infinite scroll) when the user search thru the search input text

2

Hi,
I’m not really sure what question is.
Do you want to filter results from a set of loaded data,
or do you want to search directly within a database to get your results?

3

If i do the filter, only loaded data will be filtered right? now I want to search from the whole set of data rather than the filtered one

4

If you apply a filter to your list you only filter against the loaded data.

can you provide some code please,
as it’s hard to help you without.

To give an idea:
I work with sqlite databases through CordovaSqlite, and preload all possible results in the list through a factory and feed this to an object.
From that object you can then filter your results. and feed it to the list.

Hope this helps…

5

I encountered the same problem some time ago. Its more of a design issue and not really an ionic issue.

Here are the things to consider:
a) The reason you are using infinite-scroll in the first place is you don’t want to load everything together
b) Let’s say your have infinite-scroll kicking in at 2%

The solution to search everything simply could be: apply a display filter in the list.

For example, let’s look at this

<ion-item collection-repeat="event in events| filter:search.text"  >
<code>
 <ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMore()" distance="2%">
        </ion-infinite-scroll>

events is a very large data source - I am fetching, say 100 records at a time, and each time a user scrolls to 2% from the bottom infinite scroll kicks in and loads 100 more.

How does this work with search? Well, if you see, I am displaying searched items in the list due to the filter. As you search, if it does not fill up the screen, thanks to inifinite-scroll, it will call loadMore() so you will automatically keep fetching new data till the list exceeds 98% of the screen. That is exactly what you want.

But there is a problem. If the poor user types a search query, and you are searching not just your visible list but the backend data list (via loadMore()) then s/he will get stuck for a while till you keep searching and the list does not populate or till you finish searching. That is not good UX.

To avoid that, I wrapped my list with

on-tap="tapped();

And there I instruct infinite scroll not to search anymore by setting more events flag for infinite scrolling to false (when he taps search again, I set it to true)

6

Well sounds brilliant… however in my case

I need to check if the entered search query is not found in the filtered list, then I need to search it from the database instead of the filtered list

thus I need to add

which means that, if the filtered list is 0, then it calls searchfromAll function. that’s looks worked but unfortunately I can’t get the searchText given like this

<input type=“text” ng-model="model.txtSearch"placeholder=“Enter Keyword”>

I’ve used watch, but I can’t access the new value in the controller, any idea?

7

Not quite sure what you mean. If the search query is not found in the filtered list, that means the filter list will not take up your full screen and that will automatically cause the loadMore (or whatever you name it) function of infinite-scroll, which is where you will load more records of your DB

BTW the code you posted did not show through.

8

I have one solution, but it makes the searching a bit lag in mobile device while it is okay in browser. What I did was that when user clicked on the search icon, I called a function that looped through the whole data in the database and store the data in a new array. Then I replaced the data in the old array (the array that store the first set amount of data that you what to display and load more of them when user scroll)with this new array that store all the data. After the users finish searching, when they clicked cancel button on the search bar, I call another function that set that new array that store all the data back to the old array that store some data.

This method does work but it makes the search function slow. But I would appreciate if anyone can improve this method and share to everyone.