Ionic-search directive

demo
1

Today I worked on list filtering and I built a little directive for this purpose.
You can try it here : http://codepen.io/jgx/pen/lcprf

The directive is :

<ion-search placeholder="" filter="" class="" min-length="" model="" source=""></ion-search>

placeholder : The search input placeholder
filter : The filter declared in the ng-repeat (like : | filter:search.value)
class : Classes to add to the main container of the directive
min-length : The minimum length the user has to type before the directive trigger the ā€œsourceā€ function
model : The model from the parentā€™s scope controller
source : The function which return the promise

Several things :

  • For the promises, the function parameter has to be named ā€œstrā€
  • For the preloaded data, the search filter has to be named ā€œsearch.valueā€
  • For the promises demo, I use Web SQL, so this demo works only on safari / chrome, but it also works with the SQLite Cordova plugin.
  • Iā€™ve included some other tiny features like my DB factory which is a wrapper around the Web SQL API using promises.
    If anyone want improve this, Iā€™ll be grateful, itā€™s my first directive ever !
    Enjoy. :slight_smile:
5 Likes
2

looks cool. put it in a github repo.

3

Thank you! That was something I was looking for. Very helpful!

4

Great work @jgx :smile:

I would integrate ionSearch with bindonce directive to disable unusable watchers that very effect on search performance. In chrome it works fine but on phones with 320 accounts the typing is slow.

5

This looks really good. Thanks for sharing.

6

Hi,

Your search diective works fine wth WEBSQL but encnter issues with SQLiteā€¦

I tried to implement the SqlitePlugin instead of the web sql in your example.
Unfortunately I have an issue : SQLitePlugin.js: Line 56 : Uncaught TypeError: Object # has no method ā€˜execā€™

Did you encounter this behavior ?
I just added the Sqlite Cordova plugin and the JS file associated.

7

As the Sqlite plugin and the WebSQL share the same API, I think it could be a plugin import error or maybe your device is not ready when you try to execute some queries. (You have to put the database initialization and the first queries loaded inside a $ionicPlatform.ready(function() {}); block).
Did you install the plugin and add the cordova.js in your index ?
If itā€™s working with WebSQL, it should works the same way with the SQLite plugin.

8

Did you install the plugin and add the cordova.js in your index ? YES

You have to put the database initialization and the first queries loaded inside a $ionicPlatform.ready(function() {}); block).

I didnā€™t :slight_smile: I just launched a blank version of IONIC to try your directive :slight_smile:
thankk you for your supportā€¦

9

OK I applied the ionicplatform.reay in the RUN, itā€™s working for the Preloaded tab but I donā€™t have any tools to check the database on my phoneā€¦

The Sqlite plugin was installed with : cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git
And I still have this issue : D/CordovaLog( 5858): file:///android_asset/www/js/SQLitePlugin.js: Line 56 : Uncaught TypeError: Object # has no method ā€˜execā€™

The system detects properly the Sqlite I added a console.log to see it.

  if (window.sqlitePlugin) {
                console.log('SQLITE')

Here the ready add-on.

.run(function(DB, $ionicPlatform){
$ionicPlatform.ready(function() {
DB.init();
})
})

10

Hello, I cannot access the codepen anymore. I would be very thankful if you could make your codepen available, again. Thank you in advance and thumbs up for the good work!

11

I think I deleted it by accident. Iā€™ll make a repository on github with all my directives if you want.

3 Likes
12

Can you make the github ?

13

I am especially interested in the search directive. But I would definetly look at the other directives, too. I always like to see what people build.

So I would be very thankful and I think it would be of great help to many ionic users!

15

Thanks a lot! It works like a charm.

16

I have one more question:

I would like that after I click on one item in the list, the input field takes that value. So I created an ng-click event to call the following function:

$scope.update_field = function(user){
        $scope.search = {value: user.name};
    };

But the input field is not updating. Do you know what I am doing wrong?

Thank you in advance!

17

you need to define ng-model = ā€œsearch.valueā€ in your input.

18

First of all, thank you for your reply. I did that, but forgot to mention it. Strangely that doesnt work.
If I add a second field without the directive but bound to the search.value-model this new field updates as expected. But not the auto-complete-field.

19

The CodePen link seems to be gone now. Does anyone still have this?

20

Codepen link doesnā€™t work:(

2 Likes
21

Hello. The Codepen link is not working. Is there github link.

Thank you