Recently, I came to a point where I need to change loaded url with server side interface. The project was on shopify so I could not add any code in .htaccess file. as generally we do in php based projects. So, the task was to change opened url on client side. The url was http:www.example.com/pages/about, the required one was like : http:www.example.com/about. I had approached this using JS hack. Here's the code if anyone has the same need.

<script>
 $( window ).on( "load", function() {
    var current_url = window.location.origin + window.location.pathname; // taken current url with 'pages' slug in variable.
   /* remove 'pages' from current url */    
    var url = location.href    
    url = url.replace("/pages","");
    history.pushState('', '', url);
    
  });

</script>


This worked for me perfectly when I used to open new pages with pages slug. Each time it removed the 'pages' from the url, but..

when I refresh the same page, I found 404.
Which is totally fair, because at that time the current url was 'http:www.example.com/about' which was not available on server side so it throw an error. For getting rid of this, follow the below code.

What would be the logic??

To remove 'pages' only if new page clicked. If user refresh the same page then we'd create a js function to reload page with the old 'pages' contained url. i.e. http:www.example.com/pages/about. Which we assigned already in current_url variable.

<script>
if(window.location.href.indexOf("pages") > -1) { // make sure to run only on 'pages' contains the url
window.onbeforeunload = function(e) { 
  e.preventDefault()    
  old_path = window.location.origin +"/pages"+window.location.pathname; // took site url & slug and assigned 'pages' string from where we removed.
  /* main hack. Check if the next clicked element is defined or not. If user clicked on any link 'document.activeElement.href' would be defined. If not, it would be undefined. So.. */
  if(document.activeElement.href==undefined){ 
    window.setTimeout(function () { 
      window.location =old_path; // set location to url which contained 'pages'
    }, 0); 
  }
window.onbeforeunload = null; // necessary to prevent infinite loop, that kills your browser 
}
}
</script>

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')
});