Predictive search in angular js - angularjs

I want to implement predictive search using angular. Suppose, there are data of tens of thousands of employees then it's not feasible to preload all the data and use filter to on it.
How can I perform the same task? I want my search box dropdown <div> to show results just like its shown in Google Search.

I would use angular-ui-bootstrap typeahead directive: https://angular-ui.github.io/bootstrap/#!#typeahead.
See this post for making calls to a server : How to tie angular-ui's typeahead with a server via $http for server side optimization?

If you don't want to preload that much data on the browser you will need to do it server side and provide an API that will accept search params, search the database, and return a list of matches. I suggest reading up on type-aheads.

Related

How to add a powerful search functionality to my web app

I am building an app to browse events. The front end uses angular framework and the backend uses laravel.
How do I add a powerful search functianlity, wherein the user enter his query using an input element and I pass the same to laravel controller.
I now need to return relevant events based on the query.
As of now I am using a very basic algorithm - each word in a query is pushed into an array. Article's are discarded. Based on the length of the array, I try to match each words to some fileds in the table and return unique events.
Is there a better, faster and more efficient way of doing this.
You could use laravel-search
It has support for a few advanced search methods.
I recommend you to use Elastic search for your goals. You can find tutorial here: http://www.fullstackstanley.com/read/simple-search-with-laravel-and-elasticsearch. Also you can use good wrapper https://github.com/mmanos/laravel-search for elastic and another search engines.
Well you added the tag elasticSearch so I guess that's what you are interested in. ElasticSearch has no authentication system so the best way is to create a controller in Laravel that comunicates with elasticSearch a returns the JSON response.
A basic setup will not be hard to do, anything beyond that will need you to learn more advanced concepts of ElasticSearch.
ElasticSearch will handle the search algorithm for you, you just need to pass the value the user is searching and that's it.

JHipster : Custome pagination with post method and parameter

I generated one application using JHipster V3. I am trying to modify the search functionality and adding some kind of filter where user select some filter and hit search button and my angular search controller will make a POST call to my API.I did modification on server side to support filter search and return data.
Now I want to modify pagination link so that they also make a POST call with selected filter data instead of GET.
I did some investigation and found that when user click on link call goes to 'ui-bootstrap-tpls.min.js' [selectPage] function.
I dont want to make any changes on this js as it is global and will work for other UI screen.
Is there any better approach to implement such requirements?

Are ASP.NET-MVC4 and AngularJs work well together?

Is the combination of technological ASP.NET-MVC4, and AngularJs work well?
About the needs of my app: most of the work of my application view pages with tables of information.
I need to have an easy option to identify each point in the tables on the client side, highlight it, paint it, and request additional information from the server about it.
ASP.NET MVC and Angular.js have nothing in common.
Short answer is yes - they work well together.
You would simply make all your Actions respond with JSON rather than HTML (unless you want HTML in some scenarios)
i.e you write your HTML template, angular controller, etc on the client, and have an Action to grab all the table records as JSON, then load that in your angular controller to populate the table, interact with it all on the client, and send any changes back to the server.
You could replace Angular with any client-side technology if you wanted. Backbone, Knockout, etc.

Retrieve Response data from another website using cakephp

I am trying to hit the courier companies website from Controller ( e.g bluedart,fedex etc) by passing the courier tracking number and fetch status of the given tracking number.
I am using $HttpSocket->get/post to hit the webpage URL
I am able to display the response body
How can I fetch the data from the response.
Or is there any other way to achieve the same
Please help me out .
How can I fetch the data from the response.
Parse the result, either using regular expressions or the DOMDocument class and traverse it. See Parsing HTML in Cakephp as well.
Or is there any other way to achieve the same
Use the APIs these companies usually offer.

Search results filter - controller or service or filter?

I have a search results page. The search results page is basically one large controller at the moment. I have code which is for the filters however this isn't an angularjs filter as such because I'm making another search to back-end and I'm not just returning a different array set. I want to keep the filter separete from the search results controller because its already large as it is. My question is: do I make it another controller and broadcast changes to the searchResults controller or do I make it a service or is it actually a filter?
I'm currently thinking a separete controller makes more sense as I'm still having to use scope but with a service I can only use $rootScope it seems.
Overall it would be good to know what calls for a filter and controller.
It all depends on where you want to do the data filtering. If you're doing it server-side, then I'd put it in the service that you're probably already using to get the data. If you're not using a service to get the data, I'd recommend pulling that out of the controller first.
If you want to just grab all the data and then handle the filtering in the client, then you can create a filter module and pass it into the app to be called in the view. Depending on how complex your filtering is, it might be as simple as using one of Angular's built-in filters.
Hard to get more specific without knowing more about what you're trying to accomplish.

Resources