Search Filter with AngularJS

[kmfkmsfk]

In this tutorial, we are going to create another Search Filter with AngularJS function. This function has always been difficult in terms of looking up for data. With the use of AngularJS, this will be easy for us to create this kind of function.

Creating Markup

• Create TextBox for search.
  
• Preparing for the list of country names.
  

Kindly copy and paste this HTML source code to your BODY tag of your page.

1. <div
   
   class
   
   =
   
   "container"
   
   >
   
2. <input
   
   type
   
   =
   
   "text"
   
   ng-model=
   
   "filter_Country"
   
   placeholder=
   
   "Search . . . . . "
   
   autofocus=
   
   "autofocus"
   
   /
   
   >
   
3. <img
   
   src
   
   =
   
   "img/search.png"
   
   alt
   
   =
   
   "S"
   
   class
   
   =
   
   "search-icon"
   
   title
   
   =
   
   "search"
   
   >
   
4. 
   
5. <div
   
   class
   
   =
   
   "holder-country"
   
   >
   
6. <div
   
   class
   
   =
   
   "header-country center"
   
   >
   
7. Country List
   
8. </
   
   div
   
   >
   
9. <div
   
   class
   
   =
   
   "list-country-scrollbar"
   
   >
   
10. <div
    
    class
    
    =
    
    "list-country"
    
    ng-repeat=
    
    "country in countrylist | filter: filter_Country"
    
    >
    
    {{country.name}}</
    
    div
    
    >
    
11. </
    
    div
    
    >
    
12. </
    
    div
    
    >
    
13. </
    
    div
    
    >
    

Preparing Script

• Fetch all country list name using the get method.
  
• Bind the array for a country name to view.
  

Kindly copy and paste this script before the end of your BODY tag of your page.

1. <
   
   script src=
   
   "js/angular.js"
   
   ></
   
   script>
   
2. <
   
   script src=
   
   "js/jQuery.js"
   
   ></
   
   script>
   
3. <
   
   script src=
   
   "js/slimscroll.js"
   
   ></
   
   script>
   
4. <
   
   script>
   
5. var
   
   app =
   
   angular.module
   
   (
   
   'search_Country'
   
   ,
   
   [
   
   ]
   
   )
   
   ;
   
6. 
   
7. app.controller
   
   (
   
   'Country_Controller'
   
   ,
   
   function
   
   (
   
   $scope,
   
   $http)
   
   {
   
8. $http.get
   
   (
   
   'js/country.json'
   
   )
   
   .then
   
   (
   
   function
   
   (
   
   list)
   
   {
   
9. $scope.countrylist
   
   =
   
   list.data
   
   ;
   
10. jQuery(
    
    '.list-country-scrollbar'
    
    )
    
    .slimScroll
    
    (
    
    {
    
11. height:
    
    '250px'
    
12. }
    
    )
    
    ;
    
13. }
    
    )
    
    ;
    
14. }
    
    )
    
    ;
    
15. </
    
    script>
    

List of Country Names in JSON

1. [
   
2. {
   
   "name"
   
   :
   
   "Virgin Islands, British"
   
   }
   
   ,
   
3. {
   
   "name"
   
   :
   
   "Virgin Islands, U.S."
   
   }
   
   ,
   
4. {
   
   "name"
   
   :
   
   "Wallis and Futuna"
   
   }
   
   ,
   
5. {
   
   "name"
   
   :
   
   "Western Sahara"
   
   }
   
   ,
   
6. {
   
   "name"
   
   :
   
   "Yemen"
   
   }
   
   ,
   
7. {
   
   "name"
   
   :
   
   "Zambia"
   
   }
   
   ,
   
8. {
   
   "name"
   
   :
   
   "Zimbabwe"
   
   }
   
9. ]
   

Result

And, that's it. This is the steps on how to create Search Filter with AngularJS.

Kindly click the "Download Code" button below for full source code. Thank you very much.

Hope that this tutorial will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download