Follow this simplest steps for getting custom post type data using angularJs text input search filter.
First of all include live jQuery, angularJs live Library and create a custom js file.
Download and install WordPress REST API (Version 2)
you can skip next step if you want to fetch default post type data only.
otherwise,
we need to add REST API Support for Custom Content types
for already created taxonomy,
add:
add_action( 'init', 'my_custom_taxonomy_rest_support', 25 );
function my_custom_taxonomy_rest_support() {
global $wp_taxonomies;
//be sure to set this to the name of your taxonomy!
$taxonomy_name = 'your_custom_taxonomy_name';
if ( isset( $wp_taxonomies[ $taxonomy_name ] ) ) {
$wp_taxonomies[ $taxonomy_name ]->show_in_rest = true;
// Optionally customize the rest_base or controller class
$wp_taxonomies[ $taxonomy_name ]->rest_base = $taxonomy_name;
$wp_taxonomies[ $taxonomy_name ]->rest_controller_class = 'WP_REST_Terms_Controller';
}
}
read full here : http://v2.wp-api.org/extending/custom-content-types/
open browser and navigate: http://example.com/wp-json/wp/v2/your_custom_taxonomy_name
It should show you your taxonomy in JSON format.
open js file and
add
angular.module('myApp', []).controller('namesCtrl', function($scope, $http) {
$http.get("http://example.com/wp-json/wp/v2/your_custom_taxonomy_name")
.then(function (response) {
$scope.names = response.data;
})
});
open template
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input id="txtbilal" type="text" ng-model="test"></p>
<ul id="customData">
<li ng-repeat="x in names | filter:test">
<a href="{{ x.link }}">{{ x.name }}</a>
</li>
</ul>
</div>
here's my text box which fadeIn result on text input
you can also add a simple fadeIn jQuery function like me,
$('#customData').css('display','none');
$('#txtbilal').on("focusin", function(){
$('#customData').fadeIn('slow')
});
First of all include live jQuery, angularJs live Library and create a custom js file.
Download and install WordPress REST API (Version 2)
you can skip next step if you want to fetch default post type data only.
otherwise,
we need to add REST API Support for Custom Content types
for already created taxonomy,
add:
add_action( 'init', 'my_custom_taxonomy_rest_support', 25 );
function my_custom_taxonomy_rest_support() {
global $wp_taxonomies;
//be sure to set this to the name of your taxonomy!
$taxonomy_name = 'your_custom_taxonomy_name';
if ( isset( $wp_taxonomies[ $taxonomy_name ] ) ) {
$wp_taxonomies[ $taxonomy_name ]->show_in_rest = true;
// Optionally customize the rest_base or controller class
$wp_taxonomies[ $taxonomy_name ]->rest_base = $taxonomy_name;
$wp_taxonomies[ $taxonomy_name ]->rest_controller_class = 'WP_REST_Terms_Controller';
}
}
read full here : http://v2.wp-api.org/extending/custom-content-types/
open browser and navigate: http://example.com/wp-json/wp/v2/your_custom_taxonomy_name
It should show you your taxonomy in JSON format.
open js file and
add
angular.module('myApp', []).controller('namesCtrl', function($scope, $http) {
$http.get("http://example.com/wp-json/wp/v2/your_custom_taxonomy_name")
.then(function (response) {
$scope.names = response.data;
})
});
open template
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input id="txtbilal" type="text" ng-model="test"></p>
<ul id="customData">
<li ng-repeat="x in names | filter:test">
<a href="{{ x.link }}">{{ x.name }}</a>
</li>
</ul>
</div>
here's my text box which fadeIn result on text input
you can also add a simple fadeIn jQuery function like me,
$('#customData').css('display','none');
$('#txtbilal').on("focusin", function(){
$('#customData').fadeIn('slow')
});

