Search Bar with forwarding to different tab

ionic-v1
1

Hi, so I wanted to create a simple search bar, where you will be forwarded to another tab if you enter.

For example, if I input ‘query’ and then enter, I will be forwarded to #/tab/search/query.

I have tried multiple ways but I never accomplished it.

This is my code:

<label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Search">
</label>
2

If you want it happen when the user hits “Enter” you will probably want it wrap the search box in a form.

Maybe something like this:

<form ng-submit="goToTab(searchTerm)">
  <label class="item item-input">
      <i class="icon ion-search placeholder-icon"></i>
      <input type="text" placeholder="Search" ng-model="searchTerm">
  </label>
</form>

And then in your controller do something like this:

$scope.goToTab = function(searchTerm) {
  $state.go('otherTabState', {searchTerm: searchTerm});
};

Since there is only one field in the form, hitting enter will trigger the form’s ng-submit. You can read more about how that works in the AngularJS docs: https://docs.angularjs.org/api/ng/directive/form#submitting-a-form-and-preventing-the-default-action

1 Like
3

Thanks a lot! It worked, appreciate it <3

4

Hi @jfrench, i have same problem and use your code in my app.
but i dont know how to show the result in another page after user type and enter.
i try to use this code in my result :

<div class="list" ng-repeat="news in vm.news | filter:searchTerm">
{{news.title}}
</div>

but it just show all of my content, not the result.
Could you help me to solve it?
Thank you